Can't bind to 'ngModel' since it isn't a known property of 'mat-slide-toggle'

Question

I am trying to get the current value of a mat-slide-toggle but unfortunatly I will get an error:

Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'mat-slide-toggle'.

I am using the toggle like this in the html part of my component:

 <mat-slide-toggle color="primary" [(ngModel)]="showInnerView">
      Default Slide Toggle
 </mat-slide-toggle>

Corresponding property in my component:

showInnerView: boolean = false;

What I am doing wrong?

Documentation of mat-slide-toggle

Official example of mat-slide-toggle together with [(ngModel)]

Used Versions: Angular: 5.2.4, Angular Material: 5.2.0

Mezo Istvan · Accepted Answer · 2020-04-20T20:16:01.377

33

ngModel lives in FormsModule of @angular/forms, so import that to your AppModule (or whichever module you are trying to use it in).

edited Apr 20 '20 at 20:16

answered Feb 11 '18 at 20:10

Mezo Istvan

score 14 · Answer 2 · answered Feb 11 '18 at 20:18

14

Please try to include FormsModule in your corresponding Module like below

@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

answered Feb 11 '18 at 20:18

I had import @angular/forms included, but only used the ReactiveFormsModule. Including FormsModule helped! – ill Jul 25 '19 at 13:19

score 0 · Answer 3 · answered Jul 30 '21 at 08:22

0

i had the same problem, after running

ng serve

it was fixed

answered Jul 30 '21 at 08:22

Tomer Atzmon

This is not an answer as it does not provide any solution or explanation, please have a look at the tour from StackOverflow on how to answer questions: https://stackoverflow.com/help – Ferie Jul 30 '21 at 09:58
@Ferie, actually it helped me xD I had this error even tho I had FormsModule imported in my component's module. Restarting the application removed this error. Strange, but it works. – Symlis Nov 03 '21 at 14:07
@Symlis I hope you recognise that `ng serve` is just running locally the application: it does not solve the issue by itself. You must have changed something in the app to let the build works. – Ferie Nov 04 '21 at 21:04

3 Answers3