bug(mat-chip-list): a list without `multiple` throws ExpressionChangedAfterItHasBeenCheckedError if multiple items are selected.

[IgorMinar]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/components-issue-chip-list-multiple?file=src%2Fapp%2Fexample-component.html

Steps to reproduce:

1. Click on chips "item1", "item2", and then "item3".

Expected Behavior

All three chips are selected or just the last chip is selected.

I would think that selecting multiple by default makes sense since due to the usage pattern, but even if we stick to the default being single chip selection, then incorrect usage (selecting two chips) should not result in an internal error. Instead the error should be actionable and point to the correct usage the multiple selection support.

Actual Behavior

Only "item2" and "item3" are selected and an exception is thrown:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-chip-selected: true'. Current value: 'mat-chip-selected: false'.
    at viewDebugError (core.umd.js:21030)
    at expressionChangedAfterItHasBeenCheckedError (core.umd.js:21018)
    at checkBindingNoChanges (core.umd.js:21227)
    at checkNoChangesNodeInline (core.umd.js:31502)
    at checkNoChangesNode (core.umd.js:31489)
    at debugCheckNoChangesNode (core.umd.js:32087)
    at debugCheckRenderNodeFn (core.umd.js:32041)
    at Object.eval [as updateRenderer] (VM870 ExampleComponent.ngfactory.js:56)
    at Object.debugUpdateRenderer [as updateRenderer] (core.umd.js:32030)
    at checkNoChangesView (core.umd.js:31390)

Environment

• Angular: 10.1.0
• CDK/Material: 10.2.0 but also 10.0.x and 9.x

References

https://stackoverflow.com/questions/51957743/expressionchangedafterithasbeencheckederror-in-click-for-mat-chip

[RobertAKARobin]

May have been fixed by #24292?