I wanted to extend the application from [Angular2 Tutorial] [1], having the grandson component, power-select , is called from HeroDetailComponent:
selector: 'my-hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
<power-select [(power)]="hero.power"></power-select>
</div>
</div>
`,
directives: [PowerSelectComponent],
inputs: ['hero']
When I pass to hero.power as an object, the changes are reflected in the parent / grandfather.
http://plnkr.co/edit/UfMStWU5fEywvovpSIg1?p=preview
However, if I try to pass hero.power as a string, the changes will not be reflected unless I use the eventemitter @Ouput.
http://plnkr.co/edit/p9YcfGudIgSbGPp1xrlw?p=preview (provided by: zoechi)
The question is, why do I need @Output eventemitter when passing a string, and not when passing an object?
source
share