Angular 2
Angular2 इनपुट () आउटपुट ()

इनपुट ()

पेरेंट घटक: आरंभिक उपयोगकर्ता सूचियाँ।

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

बाल घटक को इनपुट के साथ मूल घटक से उपयोगकर्ता मिलता है ()

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

इनपुट गुणों का सरल उदाहरण

मूल तत्व html

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

मूल तत्व ts

export class AppComponent {
     inputPropValue: true
}

बाल घटक ts:

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

बाल घटक html:

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

यह कोड इनपुट घटक को मूल घटक से बच्चे को भेजेगा और इसका मूल्य हमारे पास निर्धारित होने पर माता-पिता के घटक में निर्धारित होगा - हमारे मामले में गलत। उसके बाद हम बच्चे के घटक में उस मूल्य का उपयोग कर सकते हैं, उदाहरण के लिए एक वर्ग को एक तत्व में जोड़ें।