Angular 2-사용자 입력

Angular 2에서는 HTML의 DOM 요소 구조를 사용하여 런타임에 요소의 값을 변경할 수 있습니다. 좀 더 자세히 살펴 보겠습니다.

입력 태그

app.component.ts 파일에 다음 코드를 배치하십시오.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: ' 
      <div> 
         <input [value] = "name" (input) = "name = $event.target.value"> 
         {{name}} 
      </div> 
   ' 
}) 
export class AppComponent { }

위 코드에 대해 다음 사항에 유의해야합니다.

[value] = ”username” − 사용자 이름 표현식을 입력 요소의 값 속성에 바인딩하는 데 사용됩니다.
(input) = ”expression” − 이것은 입력 요소의 입력 이벤트에 표현식을 바인딩하는 선언적 방법입니다.
username = $event.target.value − 입력 이벤트 발생시 실행되는 표현식.
$event − 이벤트의 페이로드 값을 갖는 Angular에 의해 이벤트 바인딩에 노출 된 표현식입니다.

모든 코드 변경 사항을 저장하고 브라우저를 새로 고치면 다음 출력이 표시됩니다.

이제 무엇이든 입력 할 수 있으며 동일한 입력이 입력 컨트롤 옆의 텍스트에 반영됩니다.

클릭 입력

app.component.ts 파일에 다음 코드를 배치하십시오.

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   template: '<button (click) = "onClickMe()"> Click Me </button> {{clickMessage}}'
})

export class AppComponent {
   clickMessage = 'Hello';
   onClickMe() {
      this.clickMessage = 'This tutorial!';
   }
}

모든 코드 변경 사항을 저장하고 브라우저를 새로 고치면 다음 출력이 표시됩니다.

Click Me 버튼을 누르면 다음과 같은 출력이 표시됩니다.