Regression in MatButtonToggleGroup causes ExpressionChangedAfterItHasBeenCheckedError

[dobrevad]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Setting the value input of MatButtonToggleGroup works without any errors.

What is the current behavior?

Setting the value input of MatButtonToggleGroup throws ExpressionChangedAfterItHasBeenCheckedError

What are the steps to reproduce?

Not reproducible in @angular/material@5.2.4.
See the working example in https://stackblitz.com/edit/angular-bmrtvf-fekbha

Reproducible in @angular/material@6.0.0-beta.5
See repro in https://stackblitz.com/edit/angular-material2-issue-savnqg.
ExpressionChangedAfterItHasBeenCheckedError error logged in the browser console on load.

The culprit is: a403bac#diff-0ab4e17fb83eadabf9c87d06e36e93d3

The issue is that now the MatButtonToggleGroup value is not set right away but only after the button toggles are initialized. As a result, the button toggles are created as not checked (their value doesn't match the value of the group since it doesn't have any). Eventually the group value is set which triggers checked = true on the button toggle. That causes ExpressionChangedAfterItHasBeenCheckedError.

What is the use-case or motivation for changing an existing behavior?

n/a

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Only @angular/material@6.0.0-beta.5

Is there anything else we should know?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}