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);
    }
  }
}
0

There are 0 best solutions below