Can't bind to 'ngModel' since it isn't a known property of 'input'. ngModel

Question

I have encountered this problem. My code seems correct, but I don't know where the error is.

This is Loginapp.module.ts

import { NgModule } from '@angular/core';
import { LoginRoutingModule } from './Loginapp-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { LoginComponent } from './Loginapp.componentLogin';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    LoginComponent,
  ],
  imports: [
    CommonModule,
    LoginRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [LoginComponent]
})
export class LoginModule { }

And this is Loginapp.ComponentLogin.html

  <h1>You Can Add Update and Delete Patient from here</h1>

  <div class="form">
      <form>
        <!-- {{patient.formPatientGroup.valid}} -->
        Username: <input  type="text" name="" id="" [(ngModel)]="cred.UserName">
        <br>
        Password: <input  type="password" name="" id="" [(ngModel)]="cred.Password">
        <input  type="button" value="" name="" id="" (click)="Login()" />
      </form>
  </div>

I am trying to bind the value of my credential class to this form

export class LoginComponent {
  cred:Credentials= new Credentials();

  Login(){
    console.log(this.cred);
  }
}