[Angular] 앵귤러 데이터 바인딩(1) Property Binding & Event Binding :: 마이자몽

Angular는 데이터 바인딩이라는 기술이 사용된다.

데이터 바인딩을 사용함으로써 기존의 DOM조작 방법보다 간편하게 View에 원하는 데이터를 출력할수 있다.

데이터 바인딩은 단방향과 양방향 두가지 방법을 사용한다.

이번글에서는 Property Binding 과 Event Bindig두가지를 배워볼거다.

이전 글에서 생성만 Line1, Line2 Module을 사용해서 연습을 해본다.

1.Property Binding

Property Binding은 html태그의 Property의 값에 변화가 가능한 변수나 code로 대치하여 동적으로 View를 변화시킬수 있다.

square Bracket []을 사용해서 태그안에 넣어준다.

line2.component.html

<h2>Line2</h2>
 
<button [disabled]='checkDisabled'>disabled button</button>
<div [innerText]='resultText'></div>

button의 disabled property와 div태그의 innerText porperty를 checkDisabled 와  resultText라는 문자열로 코드를 작성했다.

이들은 ts파일에서 넘어온 변수들을 의미한다.

line2.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-line2',
  templateUrl: './line2.component.html',
  styleUrls: ['./line2.component.css']
})
export class Line2Component{
  checkDisabled: boolean = true;
  resultText: string = "this is div tag";
}
 

ts 파일에서 확인 할수 있듯이 html파일에서 사용된 문자열은 변수들이었다.

view

ts파일에서 설정한것 처럼 button은 disabled되어있고, div 태그는 선언한대로 문자열이 바뀌어있다.

2.Event Binding

event Binding은 발생되는 이벤트들을 소괄호()를 이용해서 binding해준다.

위 Property Binding때 사용했던 코드를 조금 수정해서 예시를 만들어 볼거다.

line2.component.html

<h2>Line2</h2>
 
<button [disabled]='checkDisabled'>disabled button</button>
<button (click)="onClick()">Click</button>
<div [innerText]='resultText'></div>

 button을 추가해서 클릭 이벤트를 추가했다.

소괄호를 사용해서  event Binding을 onClick() 메서드와 해준다.

line2.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-line2',
  templateUrl: './line2.component.html',
  styleUrls: ['./line2.component.css']
})
export class Line2Component{
  checkDisabled: boolean = true;
  resultText: string = "";
  count: number = 0;
  onClick = () => {
    this.count++;
    this.resultText = "clicked" + this.count;
  }
}
 

클릭을 할때 마다 counting을 하면서 값을 추가해준다.

view

클릭 할때 마다 counting되면서 값이 올라가는것을 확인할수 있다.

아래는 몇가지 사용되는 event들이다.

event	action
click	클릭
dblclick	더블 클릭
blur	focus를 잃었을떄
focus	focus 되었을때
copy	값이 복사 되었을때
paste	값을 붙혀넣었을때
cut	값을 잘라냈을때
keydown	키보드 키를 눌러졌을때
keyup	키보드 키를 눌렀다가 뗐을때
keypress	키보드 키를 눌렀을때
mousedown	마우스 클릭 되었을때
mouseup	마우스 클릭 하고 뗐을때
mouseenter	마우스가 해당 Object 위로 올라갔을때
mouseleave	마우스가 해당 Object 밖으로 나갔을때
mousemove	마우스가 해당 Object 위에서 움직였을때
mouseover	마우스가 해당

저작자표시