Can't bind to 'ngModel' since it isn't a known property of 'input'. – have already imported it – Html

I have been trying to create a datepicker in my booking app but for some reason I can’t get ng2-datepicker to work (some error about not being a valid component)

I have resorted to a vanilla datepicker but cant get use ngmodel in my component. I have got the FormsModule imported everywhere it should, but still get the same errors. Please find code below

This is the module I am trying to use it in.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Property } from 'src/app/models/property';
import { PropertiesService } from 'src/app/shared/services/properties.service';
import { DatepickerModule } from 'ng2-datepicker';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModel } from '@angular/forms';


@Component({
  selector: 'app-book-property',
  templateUrl: './book-property.component.html',
  styleUrls: ['./book-property.component.css']
})
export class BookPropertyComponent implements OnInit {

  property: Property;
  startDate = new Date();
  endDate = new Date();

  constructor(private propService: PropertiesService, private route: ActivatedRoute) { }

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
    this.propService.getPropertyById(id).subscribe((property: Property) => {
      this.property = property;
    });
  }

  bookProperty(){

  }

}

<div class="container">
   <div class="wrapper">
      <div class="row">
         <div class="card p-3 mb-2">
            <div class="d-flex justify-content-between">
               <div class="d-flex flex-row align-items-center">
                  <div class="icon"> <i class="bi bi-house"></i> </div>
                  <div class="ms-2 c-details">
                     <h6 class="mb-0">{{property.name}}</h6>
                  </div>
               </div>
            </div>
            <div class="container">
               <img [src]="property.images.length > 0 ? property.images[0] : 'placeholder-image-url'"
                  alt="Property image">
            </div>
            <div class="mt-5">
               <h3 class="heading"><br></h3>
               <div class="mt-5">
                  <div class="property-details">
                     <h6>Rate <b>€{{property.ratePerNight}} </b> per night | {{property.address}}</h6>
                     <h6>{{property.shortDescription}}</h6>
                     <h6>Sleeps: {{property.sleeps}}</h6>
                     <div class="form-group row">
                        <label for="start-date" class="col-sm-2 col-form-label">Start Date:</label>
                        <div class="col-sm-4">
                           <input type="date" class="form-control" id="start-date" [(ngModel)]="startDate">
                        </div>
                        <label for="end-date" class="col-sm-2 col-form-label">End Date:</label>
                        <div class="col-sm-4">
                           <input type="date" class="form-control" id="end-date" [(ngModel)]="endDate">
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

This is my app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideDatabase,getDatabase } from '@angular/fire/database';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
import { PropertiesComponent } from './components/properties/properties.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AppHeaderComponent } from './components/app-header/app-header.component';
import { AuthService } from './shared/services/auth.service';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireFunctionsModule } from '@angular/fire/compat/functions';
import { ProfileComponent } from './components/profile/profile.component';
import { HomeComponent } from './components/home/home.component';
import { VerifyEmailComponent } from './components/verify-email/verify-email.component';
import { UserPropertiesComponent } from './components/user-properties/user-properties.component';
import { CreatePropertiesComponent } from './components/create-properties/create-properties.component';
import { ReactiveFormsModule } from "@angular/forms";
import { EditPropertiesComponent } from './components/edit-properties/edit-properties.component';
import { AngularFireStorageModule, BUCKET } from '@angular/fire/compat/storage';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    ForgotPasswordComponent,
    PropertiesComponent,
    DashboardComponent,
    AppHeaderComponent,
    ProfileComponent,
    HomeComponent,
    VerifyEmailComponent,
    UserPropertiesComponent,
    CreatePropertiesComponent,
    EditPropertiesComponent
  ],
  exports: [ LoginComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    CommonModule,
    AngularFireFunctionsModule,
    AngularFireStorageModule,
    
    FormsModule,
    ReactiveFormsModule

  ],
  providers: [AuthService, AngularFirestore, {provide: BUCKET, useValue: 'castleblayney-bookings-images'}],
  bootstrap: [AppComponent]
})
export class AppModule { }

I suspect that maybe the ng2-datepicker issue and this are linked?

Error:

Error: src/app/components/book-property/book-property.component.html:27:84 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.

27                            <input type="date" class="form-control" id="start-date" [(ngModel)]="startDate">
                                                                                      ~~~~~~~~~~~~~~~~~~~~~~~

  src/app/components/book-property/book-property.component.ts:12:16
    12   templateUrl: './book-property.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component BookPropertyComponent.


Error: src/app/components/book-property/book-property.component.html:27:97 - error TS2740: Type 'Event' is missing the following properties from type 'Date': toDateString, toTimeString, toLocaleDateString, toLocaleTimeString, and 37 more.

27                            <input type="date" class="form-control" id="start-date" [(ngModel)]="startDate">
                                                                                                   ~~~~~~~~~~~
28                         </div>
   ~~~~~

  src/app/components/book-property/book-property.component.ts:12:16
    12   templateUrl: './book-property.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component BookPropertyComponent.


Error: src/app/components/book-property/book-property.component.html:31:82 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.

31                            <input type="date" class="form-control" id="end-date" [(ngModel)]="endDate">
                                                                                    ~~~~~~~~~~~~~~~~~~~~~

  src/app/components/book-property/book-property.component.ts:12:16
    12   templateUrl: './book-property.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component BookPropertyComponent.


Error: src/app/components/book-property/book-property.component.html:31:95 - error TS2322: Type 'Event' is not assignable to type 'Date'.

31                            <input type="date" class="form-control" id="end-date" [(ngModel)]="endDate">
                                                                                                 ~~~~~~~~~
32                         </div>
   ~~~~~

  src/app/components/book-property/book-property.component.ts:12:16
    12   templateUrl: './book-property.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component BookPropertyComponent.




× Failed to compile.

Any light on this would be great, as all answers online say to just add it here but as you can see it doesnt work

Github link : link