Two way binding on angular material slide toggle not working as expected (Angular 4)

Question

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?

// 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;
}

// component

<mat-slide-toggle
    class="calendar-filter-types"
    [ngModel]="(filteringSchedule)"
    [color]=""
    [checked]="">
    Scheduled : {{ filteringSchedule }}
</mat-slide-toggle>

Once I check or uncheck the toggle I would expect the filteringSchedule value to change to true or false accordingly? However within the component it always stays as false for some unknown reason - can anyone suggest why is this?

I am Angular 4

Answer 1

This works on Angular8+

[(ngModel)]="filteringSchedule"

And make sure you already imported FormsModule

import {FormsModule} from '@angular/forms';

Answer 2

Just update your html to

[(ngModel)]="filteringSchedule"

Answer 3

[ngModel]="(filteringSchedule)"

Change this to:

[(ngModel)]="filteringSchedule"