angular:binding

차이

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

차이 보기로 링크

--- angular:binding [2020/06/18 15:26] – [Event Binding] taekgu
+++ angular:binding [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 84: / 줄 84: @@
 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에 들어있는 기본 제공 디렉티브

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