Asymmetrik/ngx-starter

<div class="search-input-container d-flex">
    <input
        class="form-control"
        type="text"
        [(ngModel)]="search"
        [placeholder]="placeholder()"
        (input)="onInput()"
        (keyup)="onKeyup()"
    />
    <button class="btn shadow-none" type="button" (click)="clearSearch($event)">
        <span
            class="fa-solid fa-fw"
            [ngClass]="search().length === 0 ? 'fa-search' : 'fa-times'"
        ></span>
    </button>
</div>
@if (!disableMinCountMessage() && showMinCountMessage()) {
    <div class="text-body-secondary pt-2" [@minCount]>
        <div class="pt-2">
            Searches require a minimum of {{ minSearchCharacterCount() }} characters.
        </div>
    </div>
}