template: `
  <h2>{{ title }}</h2>
`

<h1 [innerText]="car.name"></h1>
<div [style.color]="color">{{ title }} </div>

• [attr.aria-label]
  • 특성 바인딩
  • 알려진 속성이 아닌 경우에는 이 방식을 사용
• [class.btn]
  • 클래스 속성 바인딩
• [style.color],[style.background]=“'#C0FFEE'”
  • 스타일 속성 바인딩

<h1>{{ title }}</h1>
<div>
안녕하세요. {{ name }}님.
<br />
{{ description }}
<hr />
<input type="text" [value]="name" (keyup)="name = $event.target.value" />
</div>

$event.target.value =⇒ 이벤트를 발생시킨 놈의 value속성

<button (click)="btnToggle()">Toggle</button>
<select (change)="selection($event.target.value)">
  <option>Red</option>
  <option>Blue</option>
  <option>Green</option>
</select>

keyup 이벤트가 발생할 때 생성되는 이벤트 객체($event)를 컴포넌트의 이벤트 핸들러로 전달하려면 다음과 같이 작성합니다.

  <input (keyup)="onKey($event)">
  <p>{{values}}</p>

export class KeyUpComponent_v1 {
  values = '';
 
  onKey(event: any) { // without type info
    this.values += event.target.value + ' | ';
  }
}

• FormsModule에 들어있는 기본 제공 디렉티브
  • AppModule에 등록필요
• 바인딩 전: 반드시 name특성 필요
  • <input name=“txtName” ngModel />
• 단방향 바인딩
  • <input name=“txtName” [ngModel]=“txtName” />
• 양방향 바인딩: [()]표현식 사용, 박스에 든 바나나?
  • <input name=“txtName” [ngModel]=“txtName” (ngModelChange)=“txtName=$event” />
  • <input name=“txtName” [(ngModel)]=“txtName” />