Angular 2
Angular2 Eingang () Ausgang ()

Eingang()

Übergeordnete Komponente: Benutzerlisten initialisieren.

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

Untergeordnete Komponente mit Eingabe () Benutzer von der übergeordneten Komponente abrufen

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

Einfaches Beispiel für Eingabeeigenschaften

Übergeordnetes Element HTML

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

Übergeordnetes Element ts

export class AppComponent {
     inputPropValue: true
}

Kindkomponente ts:

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

Kindkomponente html:

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

Mit diesem Code wird der inputPropValue von der übergeordneten Komponente an die untergeordnete Komponente gesendet, und der Wert, den wir in der übergeordneten Komponente festgelegt haben, wird angezeigt, wenn er dort ankommt. Dieser Wert kann dann in der untergeordneten Komponente verwendet werden, um beispielsweise einem Element eine Klasse hinzuzufügen.