src/app/common/table/filter/asy-header-text-filter/asy-header-text-filter.component.html
<button
class="btn btn-text dropdown-toggle dropdown-toggle-hide-caret px-2"
type="button"
cdkOverlayOrigin
#trigger
(click)="toggle()"
>
<span
class="filter fa-solid fa-list"
container="body"
ngbTooltip="Apply Filters"
placement="bottom"
[hidden]="isFiltered()"
></span>
<span
class="filter fa-solid fa-filter"
container="body"
ngbTooltip="Edit Filters"
placement="bottom"
[hidden]="!isFiltered()"
></span>
</button>
<ng-template
cdkConnectedOverlay
[cdkConnectedOverlayOpen]="isOpen()"
[cdkConnectedOverlayOrigin]="trigger"
(overlayOutsideClick)="isOpen.set(false)"
>
<div class="dropdown-menu d-flex flex-column" cdkTrapFocus cdkTrapFocusAutoCapture>
<div class="mt-3">
<ng-select
[(ngModel)]="option"
[clearable]="false"
[items]="['Equals', 'Contains', 'Starts with', 'Ends with']"
[searchable]="false"
(click)="$event.stopPropagation()"
(ngModelChange)="onSearchTypeChange()"
/>
</div>
<div class="search mt-2 mb-3">
<asy-search-input
placeholder="Search..."
[search]="search()"
(applySearch)="onSearchText($event)"
/>
</div>
</div>
</ng-template>