Angular2 Databinding All Versions

Examples

• 0

  @Input()
  0

  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', '[email protected]');
      users.push(new User('B', 'B', '[email protected]'); 
      users.push(new User('C', 'C', '[email protected]');  
    }      
  }
  

  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;
    }
  }
  

  created Feb 9 at 16:54

  
  edit share view discussion request improvement

  edit move example delete example