mat-chip select event emitter not firing?

Not sure what the purpose of this component is, since it's still a work in progress, but it seems to be about providing an interface to disabling and enable selectable content, and some other features.

You're not seeing any events firing because you haven't activated selected.

In your case, something like this will resolve it.

  <mat-chip-list>
    <mat-chip [selected]="state1" (selectionChange)="changeSelected($event)" (click)="state1=!state1">Papadum</mat-chip>
    <mat-chip [selected]="state2" (selectionChange)="changeSelected($event)" (click)="state2=!state2"> Naan</mat-chip>
    <mat-chip [selected]="state3" (selectionChange)="changeSelected($event)" (click)="state3=!state3"> Dal</mat-chip>
  </mat-chip-list>

Also if you want to make this more generic, resort to *ngFor directive

in html

  <mat-chip-list>
    <mat-chip *ngFor="let chip of chips" [selected]="chip.state" (selectionChange)="changeSelected($event)" (click)="chip.state=!chip.state">{{chip.name}}</mat-chip>
  </mat-chip-list>

in ts

  chips = [
    {name: 'Papadum'},
    {name: 'Naan'},
    {name: 'Dal'}
  ];

Here is a sample which I was able to use to make it working. works even if the categories are selected by default. You can also use select() method instead of selectViaInteraction() which I have used in the demo.

HTML:

<mat-chip-list #chipList [multiple]="true" [selectable]="true">
  <mat-chip *ngFor="let category of categories" #chip="matChip" (click)="category.selected ? chip.deselect() : chip.selectViaInteraction()" [selected]="category.selected" [selectable]="true" class="leadr-category-chip" (selectionChange)="changeSelected($event, category)">
    {{category.name}}
    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
  </mat-chip>
</mat-chip-list>

TS:

changeSelected($event, category): void {
  category.selected = $event.selected;
}

SAMPLE:

this.categories = [
  {
    name: 'Category 1',
    selected: false
  },
  {
    name: 'Category 2',
    selected: true
  },
  {
    name: 'Category 3',
    selected: false
  },
  {
    name: 'Category 4',
    selected: true
  },
  {
    name: 'Category 5',
    selected: false
  }
];