When I type the keyword the search for the typed word is done and only the filter of the typed words appears in the search field, when I delete the keyword the list is not updated. How to fix?
HTML:
<mat-form-field appearance="fill">
<mat-label>Palavras-chave</mat-label>
<mat-chip-list #chipList>
<mat-chip *ngFor="let keyword of keywords"
[selectable]="false"
[removable]="true"
(removed)="removeKeyword(keyword)">
{{keyword}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
<input matInput
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addKeyword($event)"
placeholder="Digite as palavras-chave aqui...">
</mat-form-field>
TS:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
keywords: string[] = [];
separatorKeysCodes = [13, 188];
addKeyword(event: MatChipInputEvent): void {
const value = (event.value || '').trim();
if (value) {
this.keywords.push(value);
}
event.chipInput!.clear();
}
removeKeyword(keyword: string): void {
const index = this.keywords.indexOf(keyword);
if (index >= 0) {
this.keywords.splice(index, 1);
}
}
}