Can't bind to 'ngValue' since it isn't a known property of 'option' : <p>I am trying to implement <code>select</code> in Angular 5 but I am constantly getting this</p>

<p><a href="https://i.stack.imgur.com/nmJg1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nmJg1.png" alt="enter image description here"></a></p>

<p>I've tried many StackOverflow questions already, The only difference is - My components are inside another module within the application which is at the end injected into the main module eventually. I've also tried injecting the <code>FormsModule</code> inside the inner module. I have tried importing <code>ReactiveFormsModule</code>  but didn't work.</p>

<p>I've added <code>FormsModule</code> to imports like this</p>

<pre><code>import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    ...CombineComponents
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule
  ]
});
</code></pre>

<p>and here is my component markup</p>

<pre><code>&lt;label for="ctn" class="d-inline-block pl-1 semi-bold"&gt;Current active number&lt;/label&gt;
  &lt;select
    #selectElem
    class="custom-select"
    id="ctn"
    (change)="onCTNChange(selectElem.value)"
    formControlName="state"
  &gt;
    &lt;option value="" disabled&gt;Choose a state&lt;/option&gt;
    &lt;option *ngFor="let ctn of availableCTN" [ngValue]="ctn.value"&gt;
      {{ctn.text}}
    &lt;/option&gt;
  &lt;/select&gt;
</code></pre>
