mat-chip select event emitter not firing?

Question

Plunkr: http://plnkr.co/edit/y4e4jS89gOxRKQOyUW2r?p=preview

I'm using the selectionChange @Output on a mat-chip to see the resulting behavior of chip selection but it seems that the eventEmitter isn't firing on chip selection?

.html:

<mat-chip-list>
  <mat-chip (selectionChange)="changeSelected($event)">Papadum</mat-chip>
  <mat-chip (selectionChange)="changeSelected($event)">Naan</mat-chip>
  <mat-chip (selectionChange)="changeSelected($event)">Dal</mat-chip>
</mat-chip-list>

<p>Currently Selected: {{selected}}</p>

.ts:

selected: string;

changeSelected(e) {
  console.log(e);
  this.selected = e.value;
}

In this case, no event is emitted at all on click selection. Is this something that is still in development, or does selection mean something different from what I am thinking of?

Solution 1

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'}
  ];

Solution 2

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
  }
];

Solution 3

By default this control works with keyboard input.

To make it work with mouse click use #chip="matChip" and call its select()

eg

<mat-chip-list>
   <mat-chip *ngFor="let item of items" #chip="matChip"  (click)='chip.select()' (selectionChange)='changeSelected($event, segment )'>{{item}}</mat-chip>
</mat-chip-list>

Solution 4

The above implementation threw some errors for me. Worked out a simple way to detect selection:

<mat-chip-list>
  <mat-chip  color="primary" [selected]="vehicle._id === selected_vehicle_id" *ngFor="let vehicle of available_vehicles" (click)="selectVehicle(vehicle)">{{vehicle.number}}</mat-chip>
</mat-chip-list>

In TS:

selectVehicle(v){
  this.selected_vehicle_id = v._id;
}

View more solutions

Comments

[yoonjesung]

I see, I thought selection of a chip was tied to click events inherently but I guess that is not the case. Will wait to see where the development of chips go.

[erickyi2006]

nice work. i like the way mat-chip is rendered but i found it difficult to implement them as an action buttons. ended like using mat-toggle-buttons inside a mat-toolbar. pity... :(

[Steve Drake]

you can use #chip="matChip" and then chip.select()

[Bernardo Baumblatt]

Hi, @SteveDrake, just sharing that chip.toggleSelected() works better in my case.

[Neistow]

chip.toggleSelected(true) will work better since in this case ternary expression isn't needed.