Angular 4. Error “Can't bind to 'ngModule' since it isn't a known property of” but FormsModule is imported in app.module.shared.ts

Question

I'm stucked with " Can't bind to 'ngModule' since it isn't a known property of 'select'. " error. The solution supposed to be importing FormsModule in app.module.shared.ts file. I did, but I still getting the same error.

app.module.shared.t

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { StatisticComponent} from './components/statistic/statistic.component';
import { StatisticViewComponent } from './components/statisticview/statisticview.component';
import { StatService } from './components/services/stat.service';


@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        HomeComponent,
        StatisticComponent,
        StatisticViewComponent
    ],
    imports: [
        FormsModule,
        CommonModule,
        HttpModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'statistic', component: StatisticComponent },
            { path: 'statisticview', component: StatisticViewComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ],
    providers: [
        StatService
    ]
})
export class AppModuleShared {
}

statisticview.component.ts

import { StatService } from './../services/stat.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-statistic-view',
  templateUrl: './statisticview.component.html',
  styleUrls: ['./statisticview.component.css']
})
export class StatisticViewComponent implements OnInit {
  private affiliates:string[]
  selectedAffiliate: any;

  constructor(private statService: StatService) {
   }

   ngOnInit(): void {
     this.statService.getAvailableAffiliates().subscribe( s => {
       this.affiliates = s;
       console.log(s);
      })
  }

  OnAffiliateChange() {
    console.log(this.selectedAffiliate)
  }

}

statisticview.component.html

<div class="row">
    <div class="form-group">
        <label for="aff">Affiliate</label>
        <select name="aff" id="aff" class="form-control" (change)="OnAffiliateChange()" [(ngModule)] ="selectedAffiliate">
            <option value=""></option>
            <option *ngFor="let a of affiliates" value="{{a}}">{{a}}</option>
        </select>
    </div>
</div>

from package.json

 "dependencies": {
    "@angular/animations": "4.2.5",
    "@angular/common": "4.2.5",
    "@angular/compiler": "4.2.5",
    "@angular/compiler-cli": "4.2.5",
    "@angular/core": "4.2.5",
    "@angular/forms": "4.2.5",
    "@angular/http": "4.2.5",
    "@angular/platform-browser": "4.2.5",
    ........

Answer 1

It should be ngModel instead of NgModule

  <select name="aff" id="aff" class="form-control" (change)="OnAffiliateChange()" [(ngModel)] ="selectedAffiliate">
            <option value=""></option>
            <option *ngFor="let a of affiliates" value="{{a}}">{{a}}</option>           
  </select>