Angular2 - Can't bind to 'ngSwitchCase' since it isn't a known native property
<p>I have two lists that I'm presenting in my <code>.html</code> file. I'm trying to make my code not repetitive so I decided to use <code>ngSwitch</code>, but I get an error while I do the next thing:</p>

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

<p>THIS IS THE ERROR IM GETTING FOR ECH LIST:</p>

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

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

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

<p>what is wrong here? and can I make it even more efficient?</p>

<p>thanks</p>