Asymmetrik/ngx-starter

<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="my-3">
            <ng-select
                name="teamAdmin"
                bindLabel="name"
                placeholder="Search..."
                style="width: 200px"
                [(ngModel)]="selectedValue"
                [items]="(values$ | async) || []"
                [loading]="loading()"
                [typeahead]="input$"
                (ngModelChange)="onFilterChange()"
            />
        </div>
    </div>
</ng-template>