CODEWITHSUNDEEP
javascriptangularangular-materialangular6
sami
sami

Reputation: 733

Angular Material 6 Mat-Chip-List - two mat-chip-list declarations share the same data source

Using Angular 6 and Angular Material, I am trying to make 2 Auto-complete Chip Lists with different data sources - I have extended the last example here at: https://material.angular.io/components/chips/overview

However, the last Mat-Chip-List seems to "override" the previous one, even though they are mapped to different objects and tags etc.

If you remove the second Mat-Chip-List, the first one loads correctly - if you change the order of declaration of either Map-Chip-List, the second one always loads correctly

I have created a StackBlitz here for demo: https://stackblitz.com/edit/angular-v2jdk8

Is there a way to uniquely identify either of these?

Upvotes: 2

Views: 1783

Answers (1)

Kim Kern
Kim Kern

Reputation: 60457

The problem is that you bind both your autocompletions to the variable auto. Find unique names and it works fine.

Instead

[matAutocomplete]="auto"
                  ^^^^^^

and

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectedFruit($event)">
                  ^^^^^

do

[matAutocomplete]="fruitAuto"
                   ^^^^^^^^^

and

<mat-autocomplete #fruitAuto="matAutocomplete" (optionSelected)="selectedFruit($event)">
                  ^^^^^^^^^^

Upvotes: 3

Related Questions