IT 회사에서 즐겁게 지내기!

지난 번에는 부모(Parent)에서 자식(Child)으로 

Input을 통해 데이터를 전달하였습니다.

Angular Component Communication (Input)

이번에는 반대로 자식에서 부모로

Output을 통해 데이터를 전달해보겠습니다.

달력 컴포넌트에서 날짜를 선택하면

부모 컴포넌트로 선택한 날짜를 전달할게요.

1. Import Output, EventEmitter

자식에서 부모로 이벤트를 전달하는 형태에요.

Output과 EventEmitter 모듈을 사용합니다.

angular/core 모듈 안에 있습니다. 

import { ... Output, EventEmitter } from '@angular/core';
...
@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {
  ...
}

2. Output 정의 및 emit 함수 생성

Input과 비슷한 형태의 어노테이션을 사용합니다.

괄호 안에 부모로 전달할 이벤트 이름을 적습니다.

그리고 EventEmitter 타입으로 초기화했어요.

마지막으로 날짜 선택 이벤트를 부모로 전달할 함수를 만들었습니다.

참고로 selectDay는 날짜 click과 연결된 메서드입니다.

...
@Component({
  ...
})
export class CalendarComponent implements OnInit {
  ...
  @Output('dateChange') dateChange: EventEmitter = new EventEmitter();
  ...
  selectDay(day){    
    ...
    this.dateChange.emit(new Date(this.selectedYear, this.selectedMonth, day));
  }
  ...
}

3. 부모 템플릿에서 Event Binding

자식에서 전달하는 Event를 부모에서 받도록 해줍니다.

이벤트 바인딩과 동일하게 설정하면 됩니다.

데이터는 $event에 담겨 전달됩니다.

<div class="budget">

    <app-calendar [date]="date" 
         (dateChange)="onDateChange($event)"></app-calendar>
    ...
</div>

이벤트를 부모 컴포넌트의 함수와 연결해주었습니다.

전달되는 $event를 콘솔에 찍도록 했죠.

원했던 데이터가 전달되는 것을 확인할 수 있습니다.

Output 동작화면

전체 소스는 아래 주소에서 확인가능합니다.

https://github.com/jsrho1023/account-book