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 { }

(keyup) 이벤트 바인딩은 모든 키 입력에 반응합니다. 하지만 사용자가 입력을 끝내는 엔터 키 에만 반응하고 싶다면, 키 이벤트를 바인딩 할 때 $event.keyCode를 사용해서 엔터 키 만 반응하도록 필터링할 수 있습니다. 이 때 Angular는 좀 더 간단한 문법을 제공합니다. 템플릿에서 keyup.enter라고 바인딩하면 엔터키가 입력되었을 떄만 이벤트 핸들러를 실행할 수 있습니다.

@Component({
  selector: 'app-key-up3',
  template: `
    <input #box (keyup.enter)="onEnter(box.value)">
    <p>{{value}}</p>
  `
})
export class KeyUpComponent_v3 {
  value = '';
  onEnter(value: string) { this.value = value; }
}

    <input #box
      (keyup.enter)="update(box.value)"
      (blur)="update(box.value)">
 
    <p>{{value}}</p>

export class KeyUpComponent_v4 {
  value = '';
  update(value: string) { this.value = 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” />