CODEWITHSUNDEEP
javascriptangular
qwertymk
qwertymk

Reputation: 35274

ExpressionChangedAfterItHasBeenCheckedError in (click) for mat-chip

I'm getting a ExpressionChangedAfterItHasBeenCheckedError when trying to set a value on a click event for a mat-chip

I'm created a stackblitz to see the error in action (Open the console then click two or more chips): https://stackblitz.com/edit/angular-ddapw1?file=app/chips-stacked-example.html

// index.html
<mat-chip-list>
  <mat-chip
      *ngFor="let chip of availableItems; index as idx"
      [selected]="selectedItems.indexOf(idx) > -1"
      (click)="select(idx)">
    {{chip}}
  </mat-chip>
</mat-chip-list>

// index.js
import {Component, ChangeDetectorRef} from '@angular/core';

@Component({
  selector: 'chips-stacked-example',
  templateUrl: 'chips-stacked-example.html',
  styleUrls: ['chips-stacked-example.css'],
})
export class ChipsStackedExample {
  constructor(private cdr: ChangeDetectorRef) {}
  availableItems = ['foo', 'bar', 'baz'];
  selectedItems = [];
  select(idx) {
    console.log('selecting', idx);
    this.selectedItems.push(idx);
    //this.cdr.detectChanges()
  }
}

Upvotes: 0

Views: 540

Answers (1)

Ploppy
Ploppy

Reputation: 15353

You forgot to add the multiple attribute:

<mat-chip-list multiple>

Upvotes: 9

Related Questions