템플릿과 데이터 바인딩

템플릿을 사용하면 Angular에서 동적 콘텐츠를 표시할 수 있습니다. 이 단원에서는 템플릿과 데이터 바인딩의 작동 방식을 살펴봅니다.

템플릿이란 무엇인가요?

템플릿은 Angular가 컴포넌트의 뷰를 렌더링할 때 사용하는 HTML입니다. HTML과 Angular 전용 구문을 결합하여 데이터를 표시합니다.

보간법

보간법을 사용하면 컴포넌트의 값을 HTML에 삽입할 수 있습니다. 데이터를 표시하려면 중괄호 두 개를 사용하세요:

{{ data }}

{{ username }}

속성 바인딩

속성 바인딩을 사용하면 HTML 요소의 속성을 동적으로 설정할 수 있습니다:

[src] = "imageUrl"

<img [src]="user.profilePicture">

이벤트 바인딩

이벤트 바인딩을 사용하면 애플리케이션이 사용자의 동작에 응답하도록 만들 수 있습니다:

(click)="onClick()"

<button (click)="showAlert()">Click me</button>

양방향 바인딩

양방향 바인딩은 UI와 데이터를 동기화된 상태로 유지합니다. [(ngModel)]을 사용하세요:

<input [(ngModel)]="user.name">

구조적 지시문

구조적 지시문은 DOM 레이아웃을 수정합니다. *ngIf와 *ngFor가 그 예입니다.

<div *ngIf="isVisible">Visible Content</div>

ngFor 사용하기

*ngFor는 데이터를 반복 처리하고 요소를 반복해서 표시합니다:

<li *ngFor="let item of items">{{ item }}</li>

요약

템플릿과 데이터 바인딩을 사용하여 동적인 Angular 뷰를 만드는 방법을 배웠습니다!