title: Save toggle state of mat slide toggle
body: <p>I'm using slide-toggle in a aproject.However I am unbale to save the toggled stae.Everytime I refresh the page,the slide toggle returns to default state instead of remaining in the toggled state.I'm new to angular and don't know what to do.Please help.Thanks in advance.</p>
  
  <p>Here is the ts code:</p>
  
  <pre><code>export class ToggleComponent implements OnInit {
    @Output()
    change: EventEmitter&lt;MatSlideToggleChange&gt; ;
    @Input()
  checked: Boolean 
    ngOnInit() {
    }
    isChecked = true;
    formGroup: FormGroup;
    filteringSchedule: boolean ;
    toggle:Boolean;
  
    constructor(formBuilder: FormBuilder) {
      this.formGroup = formBuilder.group({
        enableWifi: false,
        acceptTerms: [false, Validators.requiredTrue]
      });
    }
  
    onFormSubmit(formValue: any) {
      alert(JSON.stringify(formValue, null, 2));
    }
  
    onChange(ob: MatSlideToggleChange) {
      this.filteringSchedule=!this.filteringSchedule;
      console.log(!this.filteringSchedule);
    } 
  }
  </code></pre>
  
  <p>The template code:</p>
  
  <pre><code>&lt;form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit(formGroup.value)" ngNativeValidate&gt;
    &lt;mat-action-list&gt;
      &lt;mat-list-item &gt; &lt;mat-slide-toggle  (change)="onChange($event)"  [checked]="filteringSchedule"  formControlName="enableWifi" &gt;Enable Wifi&lt;/mat-slide-toggle&gt;&lt;/mat-list-item&gt; 
      &lt;mat-list-item &gt; &lt;mat-slide-toggle formControlName="acceptTerms"&gt;Accept Terms of Service&lt;/mat-slide-toggle&gt;&lt;/mat-list-item&gt;
  &lt;/mat-action-list&gt;
    &lt;p&gt;Form Group Status: {{ formGroup.status}}&lt;/p&gt;
  
    &lt;button mat-rasied-button type="submit"&gt;Save Settings&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>