Understanding NgSwitch in angular2
<p>Hello i got an error as i am trying to learn angular2. I decided to have a go at replacing child components within a parent component. Both child component A and B will replace each other using the in built <code>ngSwitch</code>. But i got an error complaining about its not a native property binding to both child-componentA and child-componentB. It seems to fail to bind the property to both child components. But below i came across a solution that works but don't understand why the latter works. I followed the tutorials from angular2. Could someone explain why the first failed and second solution provided worked. Thanks. </p>

<p>parent.html</p>

<pre><code>&lt;div class= "col-md-4" [ngSwitch]="componentNumber"&gt;
  &lt;child-componentA *ngSwitchCase="1"&gt; &lt;/child-componentA&gt;
  &lt;child-componentB *ngSwitchCase="2"&gt; &lt;/child-componentB&gt;
&lt;/div&gt;
</code></pre>

<p>component.ts file of parent:</p>

<pre><code>import {Component} from '@angular/core';
//metadata tags defined but didn't need to include

export class Parent  {

   componentNumber: number = 1;

    ChangeComponent(value: number) {
       this.componentNumber = value;
    }
}
</code></pre>

<p>The code below solved my issue but i am failing to understand why the previous code above failed as i followed the examples from anuglar docs</p>

<p>Solved problem using the code below:</p>

<pre><code>&lt;div class="col-md-4" [ngSwitch]="componentNumber"&gt;
    &lt;template&gt;
       &lt;child-componentA [ngSwitchWhen]="1"&gt;&lt;/child-componentA&gt;
     &lt;/template&gt;
    &lt;template&gt;
      &lt;child-componentB [ngSwitchWhen]="2"&gt;&lt;/child-componentB&gt;
    &lt;/template&gt;
  &lt;/div&gt;
</code></pre>