chips-input-example.html

<mat-form-field class="example-chip-list">
  <mat-label>Favorite Fruits</mat-label>
  <mat-chip-grid #chipGrid aria-label="Enter fruits">
    @for (fruit of fruits(); track fruit) {
      <mat-chip-row
        (removed)="remove(fruit)"
        [editable]="true"
        (edited)="edit(fruit, $event)"
        [aria-description]="'press enter to edit ' + fruit.name"
      >
        <button matChipEdit [attr.aria-label]="'edit ' + fruit.name">
          <mat-icon>edit</mat-icon>
        </button>      
        {{fruit.name}}
        <button matChipRemove [attr.aria-label]="'remove ' + fruit.name">
          <mat-icon>cancel</mat-icon>
        </button>
      </mat-chip-row>
    }
    <input
      placeholder="New fruit..."
      [matChipInputFor]="chipGrid"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)"
    />
  </mat-chip-grid>
</mat-form-field>