Angular2 Databinding
@Input()
Section titled “@Input()”Parent Component : Initialize users lists.
Section titled “Parent Component : Initialize users lists.”@Component({ selector: 'parent-component', template: '<div> <child-component [users]="users"></child-component> </div>'})export class ParentComponent implements OnInit{ let users : List<User> = null;
ngOnInit() { users.push(new User('A', 'A', 'A@gmail.com'); users.push(new User('B', 'B', 'B@gmail.com'); users.push(new User('C', 'C', 'C@gmail.com'); }}Child component get user from parent component with Input()
@Component({selector: 'child-component', template: '<div> <table *ngIf="users !== null"> <thead> <th>Name</th> <th>FName</th> <th>Email</th> </thead> <tbody> <tr *ngFor="let user of users"> <td>{{user.name}}</td> <td>{{user.fname}}</td> <td>{{user.email}}</td> </tr> </tbody> </table>
</div>',})export class ChildComponent { @Input() users : List<User> = null;}
export class User { name : string; fname : string; email : string;
constructor(_name : string, _fname : string, _email : string){ this.name = _name; this.fname = _fname; this.email = _email; }}