MatSlideToggle: ngModel & [disabled] gives error

[vapits]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

ngModel should work with combination with disabled input.

What is the current behavior?

When I use a combination of those two and change the value of the disabled input on the update the I get an error in console (even that the component works correctly).

What are the steps to reproduce?

My DOM:

<mat-slide-toggle
   [(ngModel)]="item.enabled"
   (change)="updatePreference(item)"
   [disabled]="disableSwitches">
</mat-slide-toggle>

My component (the change event):

updatePreference(item: CommunicationPreferences) {
    this.disableSwitches = true;
    this.communicationPreferencesService.updatePreference(item)
    .finally(() => this.disableSwitches = false)
    .subscribe(data => {
      this.communicationPreferences.find(element => element.subscriptionId === item.subscriptionId).subscriptionId = data.subscriptionId;
    });
  }

The event works but the slide-toggle fails to come back from the disabled state and I get this error in the console:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'.

Also here's a working link that can replicate the error: https://stackblitz.com/edit/angular-bn4cr8

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

Angular CLI: 6.0.7
Node: 9.8.0
OS: darwin x64
Angular: 6.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser, router
... service-worker

Package                             Version
-------------------------------------------------------------
@angular-devkit/architect           0.6.7
@angular-devkit/build-angular       0.6.3
@angular-devkit/build-optimizer     0.6.3
@angular-devkit/core                0.0.22
@angular-devkit/schematics          0.0.39
@angular/cdk                        6.4.0
@angular/cli                        6.0.7
@angular/flex-layout                6.0.0-beta.15
@angular/material                   6.4.0
@angular/platform-browser-dynamic   6.0.0
@angular/pwa                        0.6.8
@ngtools/json-schema                1.1.0
@ngtools/webpack                    6.0.3
@schematics/angular                 0.6.0
@schematics/update                  0.6.7
rxjs                                6.2.1
typescript                          2.7.2
webpack                             4.10.2

[devversion]

Thanks for the issue. Good catch. The same happens for the checkbox. Will create two separate PRs that solve that issue.

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