Angular Component Communication (Input)

지인 디자이너의 도움으로 디자인을 좀 수정했습니다.

그러다보니 컴포넌트 안에 컴포넌트가 들어갔어요.

Date picker 보다는 달력을 이용하기로 했습니다.

아래 처럼요.

변경 디자인 초안

그리하여 달력 컴포넌트를 만들었습니다.

상위 컴포넌트와 달력이 서로 통신해야하죠.

부모(Parent), 자식(Child) 관계로 부르는데요.

저의 경우에는 아래와 같습니다.

달력을 싸고 있는 컴포넌트가 부모(Parent)

달력 컴포넌트가 자식(Child) 입니다.

부모 -> 자식 방향의 데이터 전달부터 볼게요.

@Input 이라는 annotation을 사용합니다.

자식(Child)입장에서 Input이 되겠죠?

자식 컴포넌트에 먼저 작업을 해줍니다.

1. 자식 컴포넌트에 Import Input

달력 컴포넌트에 Input을 Import 합니다.

@angular/core 모듈에 있어요.

2. 자식 컴포넌트에 @Input 추가

달력 컴포넌트 안에 @Input을 추가합니다.

@Input의 이름을 지정해줄 수 있습니다.

지정하지 않으면 기본 값은 변수명입니다.

이름이 변수명과 같아서 생략해도 됩니다.

저는 명시적으로 적었어요.

코드로 볼게요.

import { Component, Input, ... } from '@angular/core';
...

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {

  @Input('date') date: Date;

  ...
}

3. 부모 템플릿에서 데이터 전달

자식(Child) 컴포넌트에 @Input이 추가되었죠.

부모에서 데이터를 넣어줄 차례입니다.

매우 간단합니다.

Template의 Property 바인딩을 이용하면 됩니다.

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

@Input의 date에 부모 컴포넌트의 date를 연결합니다.

주의할 점은 Input에 이름을 지정했을 경우

그 이름이 property 이름이 됩니다.

당연히 부모 컴포넌트에 date가 있어야겠죠.

기본으로 오늘 날짜로 셋팅해주었습니다.

...

@Component({
    selector: 'app-budget',
    templateUrl: './budget.component.html',
    styleUrls: ['./budget.component.css']
})
export class BudgetComponent implements OnInit {    
    date: Date = new Date();
    ...
}

아래처럼 달력 컴포넌트에 오늘 날짜가 표시됩니다.

아직 디자인은 엉성하지만요.

달력 컴포넌트 실행 화면

다음에는 자식 -> 부모로 방향을 알아볼게요.

전체소스는 아래에서 볼 수 있습니다.

소스주소: https://github.com/jsrho1023/account-book