Get started   Components   Icons   What's New
  Get a License
⚡️New Release! Material X components for Angular⚡ view demo
Angular Components
Setproduct Design System
Forms
Autocomplete Checkbox Datepicker Form field Input Radio button Select Slide toggle Slider

Autocomplete

Basic
HTML
TS 
<form [formGroup]="stateForm">
  <mat-form-field>
    <input type="text" matInput placeholder="States Group"
           formControlName="stateGroup" required
           [matAutocomplete]="autoGroup" />
    <mat-autocomplete #autoGroup="matAutocomplete">
      <mat-optgroup *ngFor="let group of stateGroupOptionsObservable$ | async"
                    [label]="group.letter">
        <mat-option *ngFor="let name of group.names" [value]="name">
          {{name}}
        </mat-option>
      </mat-optgroup>
    </mat-autocomplete>
  </mat-form-field>
</form>
Chips
Lemon
HTML
TS 
<mat-form-field class="example-chip-list">
  <mat-label>Favorite Fruits</mat-label>
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip *ngFor="let fruit of fruits" [selectable]="true" [removable]="true" (removed)="remove(fruit)">
      {{ fruit }}
      <set-icon matChipRemove shape="close_small"></set-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      (matChipInputTokenEnd)="add($event)"
    />
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{ fruit }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>