angular:two-way-binding

차이

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

차이 보기로 링크

--- angular:two-way-binding [2020/06/10 13:53] – 바깥 편집 127.0.0.1
+++ angular:two-way-binding [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
-===== Two Way Binding =====
+====== Two Way Binding ======
-<code javascript>
+<code html>
 <input [(ngModel)]="name" type='text'>
 </code>
-ngModel를 사용하려면 app.module.ts파일에 FormsModule를 포함시켜야 합니다.
+ngModel를 사용하려면 **app.module.ts**파일에 **FormsModule**를 포함시켜야 합니다.
+<code typescript>
 import { FormsModule } from '@angular/forms'
+</code>
+<code typescript login.component.ts>
+import { Component, OnInit } from '@angular/core';
+@Component({
+  selector: 'app-login',
+  //templateUrl: './login.component.html',
+  template: `<div>
+  <input [(ngModel)]="login_id" type="text">
+  <input [(ngModel)]="password" type="password" (keyup.enter)="login()">
+  <button (click)="login()" id="btnSave">로그인</button>
+</div>
+  `,
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+  login_id: string;
+  password: string;
+  constructor() { }
+  ngOnInit(): void {
+  }
+  login(){
+    console.log('login_id:', this.login_id, this.password)
+  }
+}
+</code>

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