Anguler Component(3) - 컴포넌트 통신 (할아버지->부모->자식 단방향, 양방향 통신)

지난 시간이 이어서 계속 해보겠습니다.

 

 

parent.ts, html을 이렇게 수정해줍니다.

 

 Age를 아래로 보내주기 전에 위에서 입력을 받아야합니다.

 

 

grand.ts html을 이렇게 수정해 줍니다.

여기서 parent에게 나이를 넣어줍니다.

 

 

ng-serve로 실행시켜 보시면,

grand, parent, child가 3초에 한번 씩 나이가 올라가는 것을 확인 할 수 있습니다.

 

 

이렇게 grand, parent, child 컴퍼넌트의 단방향, 양방향 통신에 대해 알아봤습니다.

 

 

---

+ 부록

 

child.ts와 html을 이렇게 수정해주면,

 

이렇게 input의 value 값과 event를 가져올 수 있습니다.