컴포넌트 템플릿은 단순한 정적 HTML이 아닙니다. 컴포넌트 템플릿은 컴포넌트 클래스에 있는 데이터를 불러오거나 사용자의 동작을 감지하는 핸들러에 반응합니다.
동적 텍스트 표시하기
Angular는 컴포넌트 템플릿과 컴포넌트 데이터를 바인딩해서 동적으로 연결합니다. 이후에 컴포넌트 데이터가 변경되면 렌더링된 템플릿을 자동으로 갱신합니다.
템플릿에 동적 텍스트를 바인딩하려면 이중 중괄호({{, }})를 사용하면 됩니다:
@Component({ selector: 'user-profile', template: `<h1>Profile for {{userName()}}</h1>`,})export class TodoListItem { userName = signal('pro_programmer_123');}
이제 Angular가 컴포넌트를 렌더링하면 이런 화면을 볼 수 있습니다:
<h1>Profile for pro_programmer_123</h1>
이제 Angular는 시그널이 변경되는 것을 자동으로 추적하게 됩니다.
위 예제에서 선언한 userName 시그널의 값을 변경해 봅시다:
this.userName.set('cool_coder_789');
그러면 화면이 다음과 같이 변경됩니다:
<h1>Profile for cool_coder_789</h1>
동적 프로퍼티, 동적 어트리뷰트 연결하기
대괄호([, ])를 사용하면 DOM 프로퍼티를 동적으로 바인딩할 수 있습니다:
@Component({ /*...*/ // `isValidUserId` 시그널 값에 따라 `disabled` 프로퍼티 값을 설정합니다. template: `<button [disabled]="isValidUserId()">Save changes</button>`,})export class UserProfile { isValidUserId = signal(false);}
그리고 attr. 접두사를 붙이면 HTML 어트리뷰트 를 바인딩할 수 있습니다:
<!-- `listRole` 시그널 값을 `<ul>` 엘리먼트의 `role` 어트리뷰트에 바인딩합니다. --><ul [attr.role]="listRole()">
이제 DOM 프로퍼티와 어트리뷰트 값이 변경되면 Angular가 자동으로 DOM을 갱신합니다.
사용자 입력 처리하기
템플릿 엘리먼트에 소괄호((, ))를 사용하면 이벤트 리스너를 추가할 수 있습니다:
@Component({ /*...*/ // `cancelSubscription` 메서드를 실행하는 `click` 이벤트 핸들러를 추가합니다. template: `<button (click)="cancelSubscription()">Cancel subscription</button>`,})export class UserProfile { /* ... */ cancelSubscription() { /* 이벤트를 처리하는 코드는 여기에 작성합니다. */ }}
이벤트 객체를 이벤트 핸들러로 보내려면, 이벤트 핸들러 메서드를 실행하면서 Angular가 기본으로 제공하는 $event 변수를 전달하면 됩니다:
@Component({ /*...*/ // `cancelSubscription` 메서드를 실행하는 `click` 이벤트 핸들러를 추가합니다. template: `<button (click)="cancelSubscription($event)">Cancel subscription</button>`,})export class UserProfile { /* ... */ cancelSubscription(event: Event) { /* 이벤트를 처리하는 코드는 여기에 작성합니다. */ }}
@if와 @for로 흐름 제어하기
@if 블록을 사용하면 템플릿의 특정 영역을 표시하거나 감출 수 있습니다:
<h1>User profile</h1>@if (isAdmin()) { <h2>Admin settings</h2> <!-- ... -->}
@if 블록을 사용할 때 @else 블록을 함께 사용할 수도 있습니다:
<h1>User profile</h1>@if (isAdmin()) { <h2>Admin settings</h2> <!-- ... -->} @else { <h2>User settings</h2> <!-- ... --> }
특정 템플릿 영역을 반복하려면 @for 블록을 사용하면 됩니다:
<h1>User profile</h1><ul class="user-badge-list"> @for (badge of badges(); track badge.id) { <li class="user-badge">{{badge.name}}</li> }</ul>
위 예제에서 @for 문으로 DOM에서 반복되는 개별 객체를 구분하기 위해 track 키워드를 사용합니다.
자세한 내용은 왜 @for 블록에 track이 중요한가요? 문서를 참고하세요.
팁: 템플릿을 더 자세하게 알아보고 싶은가요? 그렇다면 템플릿 심화 가이드 문서를 참고하세요.
다음 단계
이제 동적 데이터와 템플릿을 연결하는 방법을 알아봤습니다. 그리고 조건에 따라 템플릿의 특정 부분을 표시하거나, 표시하지 않는 방법을 알아봤고 어떤 템플릿 부분을 반복하는 방법을 알아봤습니다.