How do I have multiple chip autocomplete on the same page using Angular material 7.1.1?

Question

I'm using Angular 6 with Angular material 7.1.1 And i'm trying to use chip with auto complete. But the problem is that when i select one of the option, that gets applied to all the chips with autocomplete.

`<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList>
    <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]="auto1"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (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>`

How do i get it to apply only to the particular input field?

The above snippet is the angular material example. What changes should be made to the above snippet to have another chip autocomplete? — John, Dec 19 '18 at 14:18
have a look at:https://stackblitz.com/edit/angular-465vnw-umqv76 — Prashant Pimpale, Dec 19 '18 at 14:33
Yes, @PrashantPimpale this is what i need, but with autocomplete. For some reason it doesn't seem to work. — John, Dec 19 '18 at 15:28
Can you show me how to do that with this https://stackblitz.com/angular/bxoneaokmgg?file=app%2Fchips-autocomplete-example.ts I would really appreciate it. — John, Dec 19 '18 at 15:37
Have implemented have a look:https://stackblitz.com/edit/angular-9nqcxf — Prashant Pimpale, Dec 20 '18 at 05:05
Thanks a lot @PrashantPimpale this was what i wanted. thanks! :) — John, Dec 20 '18 at 06:07
https://material.angular.io/components/chips/examples (Chips Autocomplete) — Amir Azizkhani, Jul 15 '20 at 05:01

score 1 · Answer 1 · answered Jun 28 '19 at 11:14

I think you just have to change the id of the mat-chip-list.

So on your first you set the id

<mat-chip-list #chipList>

and on your second you set the id

<mat-chip-list #chipList2>

Then you set

[matChipInputFor]="chipList"

and [matChipInputFor]="chipList2"

Now it should work fine.

score 0 · Answer 2 · answered Dec 20 '18 at 06:16

You have to use a different list for each Chip list and also two different attribute for [matAutocomplete]

HTML Code:

<mat-form-field class="example-chip-list">
    <mat-chip-list #chipList>
        <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"
      [matChipInputAddOnBlur]="addOnBlur"
      (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>

<h2>Second Chips List</h2>

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList>
    <mat-chip
      *ngFor="let fruit of fruits1"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove1(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput1
      [formControl]="fruitCtrl1"
      [matAutocomplete]="auto1"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add1($event)">
  </mat-chip-list>
  <mat-autocomplete #auto1="matAutocomplete" (optionSelected)="selected1($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

A Working StackBlitz Example

Is there any way to make it generic function? – Shivam Oct 23 '20 at 10:49 — Shivam, Oct 23 '20 at 10:49
@Shivam yes, but need to think on it – Prashant Pimpale Oct 24 '20 at 06:46 — Prashant Pimpale, Oct 24 '20 at 06:46

How do I have multiple chip autocomplete on the same page using Angular material 7.1.1?

2 Answers2