How to set default selected values in angular material selection lists?

Question

I want to set default selected values in an angular material selection list using angular reactive forms.

I set the default array of values in constructor using setValue() method for the selection list form control.

The problem is that I have this error in the console: ExpressionChangedAfterItHasBeenCheckedError: Previous value: 'aria-selected: false'. Current value: 'aria-selected: true'

I let you here the link to stackblitz:

https://stackblitz.com/edit/angular-vu2pcy

Answer 1

You can find detailed explanations about that exception in this article. One technique to eliminate the exception is to force change detection with ChangeDetectorRef.detectChanges.

A Stackblitz working example based on your code using ChangeDetectorRef.