본문 바로가기
개발/Angular

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

by 마이자몽 🌻♚ 2018. 9. 26.

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

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

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

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

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



1.Property Binding

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

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




line2.component.html

1
2
3
4
<h2>Line2</h2>
 
<button [disabled]='checkDisabled'>disabled button</button>
<div [innerText]='resultText'></div>
cs


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

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




line2.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
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";
}
 
 
cs


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




view


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




2.Event Binding

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


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




line2.component.html

1
2
3
4
5
<h2>Line2</h2>
 
<button [disabled]='checkDisabled'>disabled button</button>
<button (click)="onClick()">Click</button>
<div [innerText]='resultText'></div>
cs


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

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




line2.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
  }
}
 
 
cs


클릭을 할때 마다 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

 마우스가 해당 


댓글0