Can't bind to 'ngModel' since it isn't a known property of 'input' (I already did the import)

Question

I have this component:

import { Component, NgModule } from '@angular/core';
import { CoursesService } from './courses.service';



@Component({
    selector: 'courses',
    template: `
        <input [(ngModel)]="email" (keyup.enter)="onKeyUp()" />
    `
})

export class CoursesComponent { 

    email = "[email protected]";

    onKeyUp(){
        console.log();
    }

}

getting this error for the [(ngModel)] : Can't bind to 'ngModel' since it isn't a known property of 'input'

I have already imported it in my app.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoursesComponent } from './courses.component';
import { CoursesService } from './courses.service';


@NgModule({
  declarations: [
    AppComponent,
    CoursesComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [
    CoursesService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

   

do you have any solutions ? thanks