Getting data to the component with input
import { Component ,Input} from '@angular2/core';
import { ChildComponent } from './child.component';
import { Character } from './character';
@Component({
selector: 'story-app',
template: `
<div style = "border:2px solid orange; padding:5px;">
<h1>Parent Component</h1>
<input [(ngModel)] = "characters[0].name"/>
<button (click)="select(characters[0])">Input</button>
<br/><br/>
<story-characters [character]="selectedCharacter"></story-characters>
</div>
`,
directives:[ChildComponent]
})
export class ParentComponent{
characters = [
{
"id":11,
"name":"Name"
}];
selectedCharacter: Character;
select(selectedCharacter : character){
this.selectedCharacter = selectedCharacter;
}
}
<story-app>
loading...
</story-app>
import { Component, Input} from '@angular2/core';
import { Character} from './character';
@Component({
selector: 'story-characters',
template:`
<div style="border:2px solid orange; padding:5px">
<h1>Child Component: <span *ngIf="character">{{character.name}}</span></h1>
</div>
`,
inputs:['character']
})
export class ChildComponent {
public character: Character;
}
export class Character{
constructor(public id: number, public name: string){ }
}