속성 및 이벤트 바인딩 복습

두 가지 데이터 흐름 방향

보간

<p>{{ title }}</p>

// component
title = "Dashboard";

속성 바인딩 구문

<img [src]="imageUrl" [alt]="caption">

// component
imageUrl = "/logo.png";
caption = "Logo";

컴포넌트 입력에 바인딩하기

<app-user [name]="userName"></app-user>

// parent component
userName = "Ada";

특성과 속성 비교

<button [attr.aria-label]="label">Save</button>

이벤트 바인딩 구문

<button (click)="save()">Save</button>

// component
save() { console.log("saved"); }

$event 객체

<input (input)="onInput($event)">

// component
onInput(e: Event) {
  this.text = (e.target as HTMLInputElement).value;
}

컴포넌트 출력에 바인딩하기

<app-counter (changed)="onChange($event)"></app-counter>

// parent
onChange(value: number) { this.count = value; }

두 바인딩 결합하기

<input [value]="name" (input)="name = $event.target.value">

클래스 및 스타일 바인딩

<div [class.active]="isActive"
     [style.color]="textColor">
  Item
</div>

선언적으로 템플릿 유지하기

빠른 확인

복습