Component Interaction

Component Interaction

1. Input binding (@Input())

   • @Input
   • Parent
     • <child [hero]="hero" [master]="master">
     • Child
       • @input() hero : Hero; @Input('master') masterName :  string

2. setter (@Input())

   • Parent
     • <child [name]="name">
     • Child
       • private _name = '';  @Input() set name(name: string) { this._name = (name && name.trim()) || ''; }

3. Parent Listens for child event (@Output())

   • Parent
     • <my-voter *ngFor="let voter of voters" [name]="voter" (onVoted)="onVoted($event)"> </my-voter>
     • onVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }
     • Child
       • @Output() onVoted = new EventEmitter();
       • vote(agreed: boolean) { this.onVoted.emit(agreed); this.voted = true; }
       • <button (click)="vote(false)" [disabled]="voted">Disagree</button>

4. Local Variable

   • Parent
     • <button (click)="timer.stop()">Stop</button>  <countdown-timer #timer></countdown-timer>
     • Child
       • stop() { this.clearTimer(); this.message = `Holding at T-${this.seconds} seconds`; }

5. @ViewChild

   • Parent
     • @ViewChild(CountdownTimerComponent) private timerComponent: CountdownTimerComponent;
     • this.timerComponent.start();
     • Child
       • stop() { this.clearTimer(); this.message = `Holding at T-${this.seconds} seconds`; }

6. Service

   • // Observable string sources private missionAnnouncedSource = new Subject<string>(); private missionConfirmedSource = new Subject<string>();
   • // Observable string streams missionAnnounced$ = this.missionAnnouncedSource.asObservable(); missionConfirmed$ = this.missionConfirmedSource.asObservable();
   • // Service message commands announceMission(mission: string) { this.missionAnnouncedSource.next(mission); }
   • confirmMission(astronaut: string) { this.missionConfirmedSource.next(astronaut); }
   • Child - Parent
     • constructor(private missionService: MissionService) { missionService.missionConfirmed$.subscribe( astronaut => { this.history.push(`${astronaut} confirmed the mission`); }); }
     • ngOnDestroy() { // prevent memory leak when component destroyed this.subscription.unsubscribe(); }