angular:binding

차이

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

차이 보기로 링크

--- angular:binding [2020/06/18 15:12] – [Event Binding] taekgu
+++ angular:binding [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 42: / 줄 42: @@
 </select>
 </code>
+=== keyup 이벤트가 발생할 때 생성되는 이벤트 객체($event)를 컴포넌트의 이벤트 핸들러로 전달하려면 다음과 같이 작성합니다. ===
 <code html>
   <input (keyup)="onKey($event)">
@@ 줄 53: / 줄 56: @@
     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>

angular/binding.1592493126.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)