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 ngSwitch. 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.
parent.html
<div class= "col-md-4" [ngSwitch]="componentNumber">
<child-componentA *ngSwitchCase="1"> </child-componentA>
<child-componentB *ngSwitchCase="2"> </child-componentB>
</div>
component.ts file of parent:
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;
}
}
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
Solved problem using the code below:
<div class="col-md-4" [ngSwitch]="componentNumber">
<template>
<child-componentA [ngSwitchWhen]="1"></child-componentA>
</template>
<template>
<child-componentB [ngSwitchWhen]="2"></child-componentB>
</template>
</div>
