Angular mat-chip, use space and tab to enter a new input

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' | translate}}</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>

Continue reading...