Components

Autocomplete

Angular Material Autocomplete provides users with a list of suggestions based on their input.

Example

Below is an example of how BuilderKit restyles the Angular Material Autocomplete and gives it a more modern appearance.

<mat-form-field>
  <mat-label>State</mat-label>
  <input name="state" matInput [matAutocomplete]="autocomplete"/>
  <mat-autocomplete autoActiveFirstOption #autocomplete="matAutocomplete">
    @for (group of filteredStates(); track group.letter) {
      <mat-optgroup [label]="group.letter">
        @for (name of group.names; track name) {
          <mat-option [value]="name">{{ name }}</mat-option>
        }
      </mat-optgroup>
    }
  </mat-autocomplete>
</mat-form-field>