bug(MatCheckbox): Missing animation from indeterminate to checked

Reproduction

Missing animation from indeterminate to checked - stackbliz

Expected Behavior

Check icon should animate every time when status/state is changed from indeterminate to checked.

Actual Behavior

If first, initial value of status is indeterminate the spinnig animation is working fine. At the second attempt, changing from indeterminate to checked, the box is strangely blinking and there is no spinning animation.

Environment

     _                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.3
Node: 12.15.0
OS: win32 x64

Angular: 10.0.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.3
@angular-devkit/build-angular     0.1000.3
@angular-devkit/build-optimizer   0.1000.3
@angular-devkit/build-webpack     0.1000.3
@angular-devkit/core              10.0.3
@angular-devkit/schematics        10.0.3
@angular/cdk                      10.1.0
@angular/cli                      10.0.3
@angular/flex-layout              10.0.0-beta.32
@angular/material                 10.1.0
@ngtools/webpack                  10.0.3
@schematics/angular               10.0.3
@schematics/update                0.1000.3
rxjs                              6.6.0
typescript                        3.9.7
webpack                           4.43.0

[FredericGryspeerdt]

Any updates on this? We experience the same behavior in Angular 10.2.3 and Angular Material 10.2.3.

edit: I’ve found our particular issue and workaround. The order of the template attributes mattered (and possibly the timing of the binded property updates). Broken animation:

1. [determinate]
2. [checked]

Workaround:

1. [checked]
2. [determinate]

<mat-checkbox
     [checked]=""
     [indeterminate]=""
     (change)=""
></mat-checkbox>

[angular-automatic-lock-bot[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.}