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>

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

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

export class KeyUpComponent_v1 {
  values = '';
<<<<<<< HEAD
  onKey(event: KeyboardEvent) { // 타입을 지정한 경우
    this.values += (<HTMLInputElement>event.target).value + ' | ';
=======
  onKey(event: KeyboardEvent) { // with type info
    this.values += (event.target as HTMLInputElement).value + ' | ';
>>>>>>> ae0253f34adad0e37d2a5e6596a08aa049ba3072
  }
}

@Component({
  selector: 'app-loop-back',
  template: `
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }

• 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” />