Components

Autocomplete

Angular Material Autocomplete turns a plain text input into a search field that suggests matching options while the user types. The suggestions open in a panel under the input, can be gathered under group headings, and the closest match can be highlighted so a single keystroke picks it. BuilderKit restyles the panel, the options and the group headings so the mat-autocomplete component matches the rest of the design system.

Official docs API reference

The input lives inside a form field, which is what provides the label, the hint and the error messages around the suggestions.

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>

Filtering options as you type

Every keystroke narrows the panel down to the options that contain what has been typed so far, and the panel closes on its own once one of them is picked.

<mat-form-field>
  <mat-label>Framework</mat-label>
  <input name="framework" matInput [(ngModel)]="frameworkModel" [matAutocomplete]="autocomplete"/>
  <mat-autocomplete autoActiveFirstOption #autocomplete="matAutocomplete">
    @for (framework of filteredFrameworks(); track framework) {
      <mat-option [value]="framework">{{ framework }}</mat-option>
    }
  </mat-autocomplete>
</mat-form-field>

Autocomplete with icons in the options

An option can carry an icon in front of its label, which makes a long panel easier to scan when the suggestions belong to different kinds of things.

<mat-form-field>
  <mat-label>Go to</mat-label>
  <input name="shortcut" matInput [matAutocomplete]="autocomplete"/>
  <mat-autocomplete autoActiveFirstOption #autocomplete="matAutocomplete">
    @for (shortcut of filteredShortcuts(); track shortcut.name) {
      <mat-option [value]="shortcut.name">
        <mat-icon [svgIcon]="shortcut.icon" />
        {{ shortcut.name }}
      </mat-option>
    }
  </mat-autocomplete>
</mat-form-field>