GaramX

사용자 도구

사이트 도구

현재 위치: home » angular » binding
추적:
angular:binding

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
angular:binding [2020/06/18 15:11] – [Property Binding] taekguangular:binding [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 2: 줄 2:
 {{:angular:angular-data-binding.jpg|Data Binding}} {{:angular:angular-data-binding.jpg|Data Binding}}
 ===== Interpolation(보간법) ===== ===== Interpolation(보간법) =====
-<code javascript>+<code typescript>
 template: ` template: `
   <h2>{{ title }}</h2>   <h2>{{ title }}</h2>
줄 42: 줄 42:
 </select> </select>
 </code> </code>
 +
 +=== keyup 이벤트가 발생할 때 생성되는 이벤트 객체($event)를 컴포넌트의 이벤트 핸들러로 전달하려면 다음과 같이 작성합니다. ===
 +
 <code html> <code html>
   <input (keyup)="onKey($event)">   <input (keyup)="onKey($event)">
   <p>{{values}}</p>   <p>{{values}}</p>
 </code> </code>
-<Code typescript>+<code typescript>
 export class KeyUpComponent_v1 { export class KeyUpComponent_v1 {
   values = '';   values = '';
줄 54: 줄 57:
   }   }
 } }
-</Code>+</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 데이터 바인딩 ===== ===== ngModel과 Two-Way 데이터 바인딩 =====
   * FormsModule에 들어있는 기본 제공 디렉티브   * FormsModule에 들어있는 기본 제공 디렉티브
angular/binding.1592493062.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구