I am experiencing the following error:

Can’t bind to ‘{ngModel}’ since it isn’t a known property of ‘mat-slide-toggle’.

I’ve found similar threads on this topic that were resolved by importing the forms module, or reactive forms module. However I am still having the issue after doing so.

I have also done:
"ng add @angular/material" and completed the install steps.
I also ran "npm install" afterwards

The forms.ts file does not have any imports besides the following but it shouldn’t effect it:
import { Component, OnInit } from ‘@angular/core’;

I am able to see angular material objects in my local, but cannot change their properties. Things like the color property or size do not have any effect on the component. They do not throw an error either. I believe I am either missing an import or an install, any help is appreciated.

form.component.html
[{ngModel}]="goldToggle" throws the error

<div class="sliderContainer">
  <label>Gold:</label>
  <mat-slide-toggle [{ngModel}]="goldToggle"></mat-slide-toggle>
</div>

app.module.ts for my project

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatCardModule } from '@angular/material/card';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';
import { FormComponent } from './form/form.component';
import { TitleComponent } from './title/title.component';
import { BrainComponent } from './brain/brain.component';
import {
  BrowserAnimationsModule,
  NoopAnimationsModule,
} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [AppComponent, FormComponent, TitleComponent, BrainComponent],
  imports: [
    BrowserModule,
    FormsModule,
    MatInputModule,
    MatFormFieldModule,
    ReactiveFormsModule,
    MatSelectModule,
    BrowserAnimationsModule,
    NoopAnimationsModule,
    MatCardModule,
    MatSlideToggleModule,
    MatButtonModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

package.json

{
  "name": "dnd-loot-generator",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/cdk": "^15.2.2",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/material": "^15.2.2",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.3",
    "@angular/cli": "~15.2.3",
    "@angular/compiler-cli": "^15.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.9.4"
  }
}```

>Solution :

You are using the wrong syntax to bind to ngModel, should be (..) instead of {..}:

<mat-slide-toggle [(ngModel)]="goldToggle"></mat-slide-toggle>