bug(mat-checkbox): Setting value programmatically from changed listener detaches state from template

[creativeux]

Reproduction

Use StackBlitz to reproduce your issue:
https://stackblitz.com/edit/angular-ivy-zppefd?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce:

1. Click "Sausage"
2. Click "Cheese"
3. Works correctly for plain HTML inputs, and incorrectly for mat-checkbox.

Expected Behavior

What behavior were you expecting to see?

• Underlying input element should appropriately represent the checked property.

Actual Behavior

What behavior did you actually see?

• When invoking controls['control'].setValue(value) within the (changed) listener, the JavaScript state becomes out of sync with the DOM and the checked property is not set accurately.
• Removing the setValue() command from the tick stack with setTimeout() allows a subsequent digest to capture the change and keep things in sync. (see app.component.ts).
• When styles are applied, the state mismatch is masked by the presence of the .mat-checkbox-checked class as opposed to relying on the :checked pseudo-class. Commenting / uncommenting the style @import reveals the state mismatch by showing the underlying input.

Environment

• Angular: 10+ (at least)
• CDK/Material: 10+ (at least)
• Browser(s): Yes
• Operating System (e.g. Windows, macOS, Ubuntu): OSX

[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.}