09.1. 바인딩

2017.06.12 in Angular

단방향 바인딩(One-way Binding)

외부에 상태 변화가 일어나면 자신의 상태를 변경. 자기 상태를 변경한다고 해서 외부에 전달 안됌.

...
@Component({
    templateUrl: `
		<input type="text" [value]="like">
		{{ like }}
		<button class="{{myclass}}">{{myclass}}</button>
	`,
    styles: [`
	.my-italic { font-style: italic; }`]
})
export class MainPageComponent {
    like: string = "lala";
    myClass = "my-italic";
}

input에 입력을 해도 외부의 값에는 반영이 안되는 것을 알 수 있다.

프로퍼티 바인딩

[속성] 또는 bind-속성 형태로 사용

<input type="text" [value]="like">
<input type="text" bind-value="like">

<button class="{{myclass}}">{{myclass}}</button>
<button [ngClass]="myclass">{{myclass}}</button>

클래스 바인딩

CSS로 정의한 클래스 이름에 접근, 할당되야할 값은 반드시 boolean형

1	<div [class.positive]="isPositive">상태</div>

스타일 바인딩

CSS로 정의한 클래스 이름에 접근, 할당 되야할 값은 구체적인 스타일 이름

1	<div [style.color]="isPositive? 'blue':'black'">상태</div>

이벤트 바인딩

(이벤트) 또는 bind-이벤트 형태로 사용

1 2	<button (click)="onSave()">저장</button> <button on-click="onSave()">저장</button>

이벤트 정보 : https://developer.mozilla.org/en-US/docs/Web/Events

양방향 바인딩(Two-way Binding)

외부&내부 상태변화를 전달 및 반영함. [(ngModel)] 또는 bindon-ngModel을 사용.

<input type="text" [(ngModel)]="city">
<input type="text" bindon-ngModel="city">

<input [value]="city" (input)="city=$event.target.value">

실행 순서상 이벤트 바인딩인 ()가 처리되고, 프로퍼티 바인딩인 []가 처리 된다.

Reference

쉽고 빠르게 배우는 Angular2 프로그래밍 - 정진욱 지음

Comment and share

09.1. 바인딩

단방향 바인딩(One-way Binding)

양방향 바인딩(Two-way Binding)

Reference

Junho Nam