title: Angular material slide toggle capturing state
body: <p>I've got a fairly basic slide toggle. I'd like to perform an HTTP call once the slider has been toggled and in case my HTTP call fails, revert it back to the initial value. I've done it as follows:</p>
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { MatSlideToggleChange } from '@angular/material';
  import { FakeService } from './fake.service';
  
  @Component({
    selector: 'slide-toggle-configurable-example',
    templateUrl: 'slide-toggle-configurable-example.html'
  })
  export class SlideToggleConfigurableExample {
    isChecked = false;
    isCheckedInit = false;
  
    constructor(private readonly fakeService: FakeService) {}
  
    onChange(value: MatSlideToggleChange) {
      const { checked } = value;
  
      this.fakeService.throwUp(checked).subscribe(
        () =&gt; {},
        () =&gt; {
          this.isChecked = this.isCheckedInit;
        }
      );
    }
  }
  </code></pre>
  <p>However, this doesn't work. My template looks like that:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;mat-slide-toggle
      (change)=&quot;onChange($event)&quot;
      [checked]=&quot;isChecked&quot;&gt;
    Slide me!
  &lt;/mat-slide-toggle&gt;
  &lt;section&gt;
    {{ isChecked }}
  &lt;/section&gt;
  </code></pre>
  <p>But <code>isChecked</code> value never changes and is always being displayed as <code>false</code>.</p>
  <p>It seems that nothing I'm doing on <code>isChecked</code> field changes its' value.</p>
  <p>Here is a <a href="https://stackblitz.com/edit/angular-suqsld" rel="nofollow noreferrer">Stackblitz</a> to show current behavior.</p>
  <p>What do I have to change in order to get desired behavior?</p>