title: Two way binding on angular material slide toggle not working as expected (Angular 4)
body: <p>I have implemented the angular material slide-toggle that all seems to work except for some reason it isn't binding the value to the relevant variable for some reason?</p>
  
  <pre><code>// other irrevelant imports above..
  import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
  
  @Component({
    selector: 'app-calendar',
    templateUrl: './calendar.component.html',
    styleUrls: ['./calendar.component.scss'],
      host: {
       '(document:click)': 'handleClickEvent($event)',
    }
  })
  
  export class CalendarComponent implements OnInit {
  
    filteringSchedule: boolean = false;
    filteringSent: boolean = false;
    filteringFailed: boolean = false;
  }
  </code></pre>
  
  <p>// component</p>
  
  <pre><code>&lt;mat-slide-toggle
      class="calendar-filter-types"
      [ngModel]="(filteringSchedule)"
      [color]=""
      [checked]=""&gt;
      Scheduled : {{ filteringSchedule }}
  &lt;/mat-slide-toggle&gt;
  </code></pre>
  
  <p>Once I check or uncheck the toggle I would expect the <code>filteringSchedule</code> value to change to true or false accordingly? However within the component it always stays as <code>false</code> for some unknown reason - can anyone suggest why is this?</p>
  
  <p>I am Angular 4</p>