Actually, in a mat-chip, we need to press Enter to be able to add a new element in the list.

I'd like to have the space, comma and tab to have the same effect.

How would this be doable?

Here's the code :

<mat-form-field>
  <mat-label>Emails</mat-label>
  <mat-chip-grid #chipGrid aria-label="Enter email" formControlName="emails">
    @for (keyword of keywords$(); track keyword) {
    <mat-chip-row (removed)="removeKeyword(keyword)">
      {{keyword}}
      <button matChipRemove aria-label="'remove ' + keyword">
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip-row>
    }
  </mat-chip-grid>

  <input
    [placeholder]="'EMAIL' | translate"
    [matChipInputFor]="chipGrid"
    (matChipInputTokenEnd)="add($event)"
  />
</mat-form-field>

Actually, in a mat-chip, we need to press Enter to be able to add a new element in the list.

I'd like to have the space, comma and tab to have the same effect.

How would this be doable?

Here's the code :

<mat-form-field>
  <mat-label>Emails</mat-label>
  <mat-chip-grid #chipGrid aria-label="Enter email" formControlName="emails">
    @for (keyword of keywords$(); track keyword) {
    <mat-chip-row (removed)="removeKeyword(keyword)">
      {{keyword}}
      <button matChipRemove aria-label="'remove ' + keyword">
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip-row>
    }
  </mat-chip-grid>

  <input
    [placeholder]="'EMAIL' | translate"
    [matChipInputFor]="chipGrid"
    (matChipInputTokenEnd)="add($event)"
  />
</mat-form-field>

• javascript
• angular
• angular-material

Share Improve this question Follow edited Jan 29 at 14:42 Raphaël Balet asked Jan 29 at 14:07 Raphaël BaletRaphaël Balet 8,68788 gold badges6464 silver badges111111 bronze badges 1

• 1 material.angular.io/components/chips/api#MatChipInput: separatorKeyCodes. The example code already contains it: material.angular.io/components/chips/… [matChipInputSeparatorKeyCodes]="separatorKeysCodes" – jabaa Commented Jan 29 at 14:14

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

Thx @javaa for his comment, the following can be achieved with [matChipInputSeparatorKeyCodes]="separatorKeys"

Here's the code

import { COMMA, ENTER, SPACE, TAB } from '@angular/cdk/keycodes';
  
separatorKeys = [ENTER, COMMA, SPACE, TAB];

<input
  [matChipInputSeparatorKeyCodes]="separatorKeys"


  [placeholder]="'EMAIL' | translate"
  [matChipInputFor]="chipGrid"
  (matChipInputTokenEnd)="add($event)"
/>