Angular 10 - Can't bind to 'ngModel' since it isn't a known property of 'select'

Question

I tried to start a new project on angular 10 today, but i got this problem whenever a try to use a ngModel inside of anything, and i know that question was already asked and resolved several times here on stackoverflow, but i already imported FormsModule and even ReactivFormsModule, but the error keeps happening

html

<div class="background">
    <h4>Character Selector</h4>
    <label>Character</label>
    <select [(ngModel)]="selectedChar" name="char-selector">
    <option *ngFor="let char of characterList" [value]="char.value">
      {{char.label}}
    </option>
  </select>
    <p> Selected Character: {{selectedChar}} </p>
</div>

modules.ts

@NgModule({
  declarations: [],
  imports: [BrowserModule, FormsModule, CommonModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

StackBlitz Sample

Edit: Declaring AppComponent solved the problem

@NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule, FormsModule, CommonModule, ReactiveFormsModule],
   providers: [],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

Answer 1

Try this : Here I am doing a two way binding with a <select> element and a <p> element, using the ngModel directive.

<select [(ngModel)]="selectedChar">
    <option value="">-- Select a Value --</option>
    <option *ngFor="let char of characterList" [(ngValue)]="char.value">{{char.label}}</option>
</select>

<p>Selected Character: {{selectedChar}}</p>