Angular2 - Can't bind to 'ngSwitchCase' since it isn't a known native property

Question

I have two lists that I'm presenting in my .html file. I'm trying to make my code not repetitive so I decided to use ngSwitch, but I get an error while I do the next thing:

<div [ngSwitch]="currentListView">
    <div *ngSwitchCase="'People'">
      <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOfPeople">
        <div class="list-bg" *ngFor="#person of listOfPeople; #i = index" dnd-sortable [sortableIndex]="i">
          ID: {{bulk.person}} <p></p> Name: {{person.name}}
        </div>
      </div>
    </div>
    <div *ngSwitchCase="'Cars'">
      <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOfCars">
        <div class="list-bg" *ngFor="#car of listOfCars; #i = index" dnd-sortable [sortableIndex]="i">
          ID: {{car.id}} <p></p> Color: {{car.color}}
        </div>
      </div>
    </div>

THIS IS THE ERROR IM GETTING FOR ECH LIST:

(in promise): Template parse errors: Can't bind to 'ngSwitchCase' since it isn't a known native property ("

<div [ngSwitch]="currentListView">
    <div [ERROR ->]*ngSwitchCase="'People'">
      <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData"): AppCmp@42:9
Property binding ngSwitchCase not used by any directive on an embedded template ("

  <div [ngSwitch]="currentListView">
    [ERROR ->]<div *ngSwitchCase="'People'">
      <div dnd-sortable-container [dropZones]="['zone-one']" [sortabl"): AppCmp@42:4
Can't bind to 'ngSwitchCase' since it isn't a known native property ("
      </div>
    </div>

what is wrong here? and can I make it even more efficient?

thanks

Answer 1

If you use commons elements (ngSwitch, ngIf, ngFor, ...) of Angular2 you must import CommonModule in your app.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';

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

}