컴포넌트 적용하기

지금까지 컴포넌트의 템플릿, 클래스 로직, 스타일 수정방법을 알아봤습니다. 그런데 이 컴포넌트는 애플리케이션에 어떻게 적용할 수 있을까요?

컴포넌트 설정 프로퍼티 중 selector 프로퍼티가 다른 템플릿에 사용되면 그 위치에 컴포넌트를 두겠다는 것을 의미합니다. 그래서 selector 는 HTML 태그처럼 사용하며, selector 가 app-user 라면 템플릿에 <app-user /> 라고 사용하면 됩니다.

참고: 컴포넌트 조합하기 핵심 가이드 문서를 참고하세요.

이제 컴포넌트를 적용해 봅시다.

이번 예제에는 User 컴포넌트와 App 컴포넌트가 있습니다.

1. User 컴포넌트를 추가해 보세요

   User 컴포넌트를 App 컴포넌트 템플릿에 적용하기 위해 셀렉터로 지정한 app-user 를 추가합니다. App 컴포넌트의 imports 배열에 User 컴포넌트를 추가하는 것을 잊지 마세요. 추가하지 않으면 User 컴포넌트를 사용할 수 없습니다.

         
   template: `<app-user />`,imports: [User]
       

   이제 Username: youngTech라는 메시지가 화면에 표시됩니다. 템플릿을 좀 더 수정해 봅시다.

2. 마크업을 추가해 보세요

   컴포넌트 템플릿에는 HTML 마크업을 자유롭게 사용할 수 있기 때문에 App 컴포넌트 템플릿을 좀 더 수정해 봅시다. 이번에는 <app-user> 엘리먼트를 감싸는 <section> 엘리먼트를 추가해 봅시다.

         
   template: `<section><app-user /></section>`,
       

앱을 구현하는 동안 HTML 마크업과 컴포넌트는 얼마든지 자유롭게 추가할 수 있습니다. 그리고 한 화면에 컴포넌트를 동시에 여러번 사용할 수도 있습니다.

어떤 조건에 따라 컴포넌트를 표시하거나 표시하지 않으려면 어떻게 해야 할까요? 다음 예제에서 살펴 봅시다.