Angular Material MatChipList get all the selected chips on click

Question

Can anyone share how can we get all the selected chips in a MatChipList on mouse click?

in one of our requirement we need to post all current selected chip values. I am not able to find logic to do that.

<mat-chip-list  multiple id="chipList" [selectable]="true" >
<mat-chip *ngFor="let chip of productListSource" [selected]="chip.state" (click)="chip.state=!chip.state" >
  {{chip.viewValue}}
</mat-chip>

Answer 1

After spending some time on this I was able to do this the following way:

HTML

<mat-chip-list multiple id="chipList" [selectable]="true" >
  <mat-chip *ngFor="let chip of productListSource" [selected]="chip.state" (click)="chip.state=!chip.state;changeSelected('s', chip.viewValue)" >
    {{chip.viewValue}}
</mat-chip>
</mat-chip-list>

Typescript

selectedChips: any[] = [];

changeSelected(parameter: string, query: string) {

  const index = this.selectedChips.indexOf(query);
  if (index >= 0) {
    this.selectedChips.splice(index, 1);
  } else {
    this.selectedChips.push(query);
  }
  console.log('this.selectedChips: ' + this.selectedChips);
}