GaramX

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 바인딩 ======
{{:angular:angular-data-binding.jpg|Data Binding}}
===== Interpolation(보간법) =====
<code typescript>
template: `
  <h2>{{ title }}</h2>
`
</code>
===== 단방향 바인딩 =====
<code html>
<h1 [innerText]="car.name"></h1>
<div [style.color]="color">{{ title }} </div>
</code>
  * [attr.aria-label]
    * 특성 바인딩
    * 알려진 속성이 아닌 경우에는 이 방식을 사용
  * [class.btn]
    * 클래스 속성 바인딩
  * [style.color],[style.background]="'#C0FFEE'"
    * 스타일 속성 바인딩
===== 속성바인딩과 이벤트 바인딩 =====
==== Property Binding ====
<code html>
<h1>{{ title }}</h1>
<div>
안녕하세요. {{ name }}님.
<br />
{{ description }}
<hr />
<input type="text" [value]="name" (keyup)="name = $event.target.value" />
</div>
</code>

==== Event Binding ====
$event.target.value ==> 이벤트를 발생시킨 놈의 value속성
<code html>
<button (click)="btnToggle()">Toggle</button>
<select (change)="selection($event.target.value)">
  <option>Red</option>
  <option>Blue</option>
  <option>Green</option>
</select>
</code>

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

<code html>
  <input (keyup)="onKey($event)">
  <p>{{values}}</p>
</code>
<code typescript>
export class KeyUpComponent_v1 {
  values = '';

  onKey(event: any) { // without type info
    this.values += event.target.value + ' | ';
  }
}
</code>
==  event.target.value 대신 event.key를 사용하면 어떤 키가 입력되었는지 확인할 수도 있습니다: ==
=== $event 객체의 타입 ===
<code typescript>
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
  }
}
</code>
=== loop-back ===
<code typescript>
@Component({
  selector: 'app-loop-back',
  template: `
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }
</code>
==== 키 입력 필터링 (key.enter) ====
(keyup) 이벤트 바인딩은 모든 키 입력에 반응합니다. 하지만 사용자가 입력을 끝내는 엔터 키 에만 반응하고 싶다면, 키 이벤트를 바인딩 할 때 $event.keyCode를 사용해서 엔터 키 만 반응하도록 필터링할 수 있습니다.
이 때 Angular는 좀 더 간단한 문법을 제공합니다. 템플릿에서 keyup.enter라고 바인딩하면 엔터키가 입력되었을 떄만 이벤트 핸들러를 실행할 수 있습니다.
<code typescript>
@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; }
}
</code>
==== 포커스를 잃을 때 ====
<code html>
    <input #box
      (keyup.enter)="update(box.value)"
      (blur)="update(box.value)">

    <p>{{value}}</p>
</code>
<code typescript>
export class KeyUpComponent_v4 {
  value = '';
  update(value: string) { this.value = value; }
}
</code>
===== ngModel과 Two-Way 데이터 바인딩 =====
  * 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" />
GaramX

사용자 도구

사이트 도구

문서 도구
