Angular 2
Angular2 Entrada () salida ()

Entrada()

Componente principal: Inicializar listas de usuarios.

@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]');  
  }      
}

El componente hijo obtiene al usuario del componente principal con 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;
  }
}

Ejemplo simple de propiedades de entrada

Elemento principal html

<child-component [isSelected]="inputPropValue"></child-component>

Elemento padre ts

export class AppComponent {
     inputPropValue: true
}

Componente hijo ts:

export class ChildComponent {
    @Input() inputPropValue = false;
}

Componente hijo html:

<div [class.simpleCssClass]="inputPropValue"></div>

Este código enviará el inputPropValue desde el componente principal al hijo y tendrá el valor que hemos establecido en el componente principal cuando llegue allí, falso en nuestro caso. Luego podemos usar ese valor en el componente secundario para, por ejemplo, agregar una clase a un elemento.