[Angular] 03. Dynamic interface with templates

 Angular 공식 문서를 실습하고 정리하는 글입니다.

 

동적 텍스트 표시

• Binding은 컴포넌트와 템플릿과 데이터 간의 동적 연결을 생성한다.
• 이 연결은 컴포넌트 데이터가 변경되면 자동으로 렌더링된 템플릿을 업데이트한다.

 

이중 중괄호 {{ }} 를 사용하여 바인딩을 생성할 수 있다.

@Component({
  selector: 'user-profile',
  template: `<h1>Profile for {{userName()}}</h1>`,
})
export class TodoListItem {
  userName = signal('pro_programmer_123');
}

• 출력: <h1>Profile for pro_programmer_123</h1>
• {{ userName() }} 은 userName 시그널의 값 ‘pro_programmer_123’으로 대체된다.
• userName 시그널의 값이 변경되면, 앵귤러는 바인딩을 자동으로 업데이트한다.

 

동적 속성 및 속성 설정

앵귤러는 [ ] 를 사용하여 DOM 요소의 동적 속성을 바인딩할 수 있다.

@Component({
  template: `<button [disabled]="isValidUserId()">Save changes</button>`,
})
export class UserProfile {
  isValidUserId = signal(false);
}

• isValidUserId 시그널 값이 false 이므로, 버튼이 활성화된다.
• usValidUserId 시그널 값이 변경되면, 버튼의 disabled 속성도 자동으로 업데이트된다.

 

HTML 속성을 바인딩하려면 attr. 접두사를 사용한다.

<ul [attr.role]="listRole()">

• listRole 시그널의 값이 ul 요소의 role 어트리뷰트로 설정된다.

 

사용자 상호작용 처리

앵귤러는 템플릿에서 요소에 이벤트 리스너를 추가할 수 있도록 ( ) 를 제공한다.

@Component({
  template: `<button (click)="cancelSubscription($event)">Cancel subscription</button>`,
})
export class UserProfile {
  cancelSubscription(event: Event) { /* 이벤트 처리 */ }
}

• 버튼을 클릭하면 $evnet 객체가 cancelSubscription 메서드로 전달된다.

 

@if, @for 를 사용한 제어 흐름

• 앵귤러는 템플릿의 일부를 조건에 따라 표시하거나 숨기기 위해 @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>