@engie-group/fluid-design-system-angular/src/components/search/search.component.html

Fluid Design System Angular

<div class="nj-search__field-wrapper">
  <nj-icon name="search" ariaLabel="search icon" class="nj-search__icon"></nj-icon>
  <label *ngIf="altLabel" [for]="finalInputId" class="nj-sr-only" aria-hidden="true">
    {{ altLabel }}
  </label>
  <input
    #searchInput
    type="search"
    class="nj-search__field"
    [id]="finalInputId"
    [ngModel]="value"
    [attr.placeholder]="placeholder"
    [disabled]="isDisabled"
    (focus)="onTouched?.()"
    (keydown.enter)="enterKeydown.next()"
    (ngModelChange)="valueChange($event)">
  <nj-icon-button
    *ngIf="value?.length > 0"
    icon="cancel"
    class="nj-search__clear-button"
    [label]="altResetButtonLabel"
    [isDisabled]="isDisabled"
    (buttonClick)="onClearValue()"></nj-icon-button>
</div>
<ng-container *ngIf="actionTemplate" [ngTemplateOutlet]="actionTemplate"></ng-container>