하위컴포넌트에 Output속성을 사용하여 하위컴포넌트에서 발생된 이벤트로 상위컴포넌에 데이터를 전달할 수 있다.
<button (click)="onClicked($ev)"></button>
(click)은 버튼 클릭이벤트가 발생함을 나타낸다.
<app-voter *ngFor="let voter of voters" [name]="voter" (voted)="onVoted($event)"></app-voter>
(voted)="onVoted($event)"은 app-voter컴포넌트에서 voted이벤트가 발생함을 나타낸다.
사용자정의 이벤트는 컴포넌트에서 발생시켜서 전파해야 한다.
사용자정의 이벤트를 발생시킬때는 EventEmitter객체를 사용하며 옵저버블객체와 유사하게 작동한다.
@Output() voted = new EventEmitter<boolean>();
voted 컴포넌트속성에 옵저버블객체를 할당한다.
voted는 상위컴포넌트에서
<app-voter *ngFor="let voter of voters" [name]="voter" (voted)="onVoted($event)"></app-voter>
onVoted함수로 구독되어진다.
하위컴포넌트에서
this.voted.emit(agree);
상태변화를 전파하면 상위컴포넌트의 onVoted($event)로 인자를 전달하면서 함수가 호출된다.