Angular 2의 양방향 데이터 바인딩

1. Angular의 양방향 데이터 바인딩
2. Angular 2에서 양방향 데이터 바인딩 구현

이 튜토리얼에서는 Angular 2에서 양방향 데이터 바인딩을 구현하는 방법에 대해 설명합니다.

Angular의 양방향 데이터 바인딩

양방향 데이터 바인딩은 Angular의 가장 강력한 기능 중 하나입니다. 구성 요소에서 보기로 또는 그 반대로 데이터가 흐를 수 있습니다.

사용자에게 정보를 제공하고 사용자 인터페이스를 통해 기본 데이터를 변경할 수 있도록 합니다.

데이터 바인딩은 UI의 어떤 부분이 어떤 데이터에 의존하는지 추적하고 해당 데이터가 변경될 때마다 업데이트하여 애플리케이션 상태를 관리하는 데 도움이 됩니다.

단방향 바인딩과 양방향 바인딩의 중요한 차이점은 양방향 바인딩을 사용하면 어느 방향에서든 변경 사항이 우리 측의 개입 없이 자동으로 다른 쪽으로 전파된다는 것입니다.

Angular 2는 기본적으로 양방향 데이터 바인딩을 사용하지 않습니다. 정의에 따라 단방향 데이터 바인딩을 사용하지만 필요한 경우 양방향 데이터 바인딩을 위한 간단한 구문을 제공합니다.

Angular 2에서 양방향 바인딩을 모방하려면 ngModel 지시문과 ngModelChange 이벤트를 사용해야 합니다.

ngModel 지시문은 구성 요소 템플릿의 속성을 해당 클래스의 속성에 바인딩합니다. ngModelChange 이벤트는 바인딩된 속성 값이 변경될 때마다 발생합니다.

Angular 2에서 양방향 데이터 바인딩 구현

ngModel은 Angular 2의 양방향 데이터 바인딩 지시문으로, 변경 사항이 있을 때 뷰와 모델을 모두 업데이트합니다. 각 바인딩 측에 이벤트 핸들러를 설정할 수 있습니다.

결과적으로 해당 속성 값은 사용자가 사용자 인터페이스에서 수정할 때마다 자동으로 업데이트됩니다.

ngModel은 HTML 태그의 속성 또는 클래스로 사용할 수 있습니다.

Angular 2에서 ngModel을 사용한 양방향 데이터 바인딩의 예를 살펴보겠습니다.

타입스크립트 코드:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
            <h3>{{ name }}</h3>
            <input [(ngModel)]="address" />
            `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Muhammad Adil';
    address = "block no 1 sector G11, Sydney";
    onKeyUp() {
        console.log(this.address);
    }
}

여기를 클릭 위 코드의 라이브 데모를 확인하십시오.