Tags Input in angular material is throwing error that chipInput doesn't exist

Question

I am trying to put mat-chips in my code its throwing error

<mat-form-field class="example-chip-list" appearance="fill">
                                <mat-label>Favorite Fruits</mat-label>
                                <mat-chip-list #chipList aria-label="Fruit selection">
                                  <mat-chip
                                    *ngFor="let fruit of fruits"
                                    [selectable]="selectable"
                                    [removable]="removable"
                                    (removed)="remove(fruit)">
                                    {{fruit}}
                                    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                                  </mat-chip>
                                  <input
                                    placeholder="New fruit..."
                                    #fruitInput
                                    [formControl]="fruitCtrl"
                                    [matAutocomplete]="auto"
                                    [matChipInputFor]="chipList"
                                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                                    (matChipInputTokenEnd)="add($event)">
                                </mat-chip-list>
                                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
                                  <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
                                    {{fruit}}
                                  </mat-option>
                                </mat-autocomplete>
                              </mat-form-field>

In component.ts

selectable = true;
  removable = true;
  separatorKeysCodes: number[] = [ENTER, COMMA];
  fruitCtrl = new FormControl();
  filteredFruits: Observable<string[]>;
  fruits: string[] = ['Lemon'];
  allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];

  @ViewChild('fruitInput') fruitInput: ElementRef<HTMLInputElement>;

  constructor() {
    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
        startWith(null),
        map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
  }

  add(event: MatChipInputEvent): void {
    const value = (event.value || '').trim();

    // Add our fruit
    if (value) {
      this.fruits.push(value);
    }

    // Clear the input value
    event.chipInput!.clear();

    this.fruitCtrl.setValue(null);
  }

  remove(fruit: string): void {
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }

  selected(event: MatAutocompleteSelectedEvent): void {
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.allFruits.filter(fruit => fruit.toLowerCase().includes(filterValue));
  }

But this is not working for me.. Its just throwing error at me like this... Property 'chipInput' does not exist on type 'MatChipInputEvent'. I searched for this error they saying to import in main module but i already did that .

Kindly help

Answer 1

Not sure if function ".clear()" has the purpose just to delete input value after you entered one manually, (not with autocomplete options) but if so this replacement worked for me:

component.html

<mat-form-field class="example-chip-list" appearance="fill">
                            <mat-label>Favorite Fruits</mat-label>
                            <mat-chip-list #chipList aria-label="Fruit selection">
                              <mat-chip
                                *ngFor="let fruit of fruits"
                                [selectable]="selectable"
                                [removable]="removable"
                                (removed)="remove(fruit)">
                                {{fruit}}
                                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                              </mat-chip>
                              <input
                                placeholder="New fruit..."
                                #fruitInput
                                [formControl]="fruitCtrl"
                                [matAutocomplete]="auto"
                                [matChipInputFor]="chipList"
                                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                                (matChipInputTokenEnd)="add($event,fruitInput)">
                            </mat-chip-list>
                            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
                              <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
                                {{fruit}}
                              </mat-option>
                            </mat-autocomplete>
                          </mat-form-field>

component.ts

... 
  add(event: MatChipInputEvent,inputName): void {
    const value = (event.value || '').trim();

    // Add our fruit
    if (value) {
      this.fruits.push(value);
    }

    // Clear the input value
    // event.chipInput!.clear();
       inputName.value="";

    this.fruitCtrl.setValue(null);  } 
...
 

Answer 2

try this:

// Clear the input value
 if (event.input) {
  event.input.value = '';
 }

Answer 3

For me, the issue was that I had a different version of @angular/material installed.

Hope it helps others in the same situation.