[Angular] Data binding 1

data binding은 엘리먼트 프로퍼티에 동적으로 바인딩이 가능하다.

 

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  disabled = true;

  constructor() {
    setTimeout(() => {
      this.disabled = false;
    }, 5000);
  }

  ngOnInit() {
  }

}

test.component.ts

 

<button [disabled]="disabled">test</button>

test.component.html

 

결과는?

button 의 disabled 프로퍼티가 초기값은 true 였으므로 button이 비활성화 되어 있다가

5초 뒤 disabled 프로퍼티가 false 로 바뀌면서 test 버튼이 활성화 된다.

 

이처럼 프로퍼티를 동적으로 바인딩 할때 사용되며 굉장히 많이 쓰인다.

 

 

또 다른 예제가 있다.

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  txt = 'hello';

  constructor() {
  }

  ngOnInit() {
  }

}

 

이 txt 에 담긴 문자열을 화면에 출력하고 싶다면 어떻게 해야 할까?

 

우선 interpolation을 사용 할 수 있을 것이다.

 

<p>{{txt}}</p>

이런식으로

 

그리고 data binding을 사용 할 수도 있다.

 

<p [innerHTML]="txt"> </p>

 

또는 하드코딩을 할 수도 있다.

<p [innerHTML]="'hello'"></p>

 

이때 hello 라는 변수가 아닌 스트링을 출력하고자 하므로 " " 안에  '' 가 들어감을 주의 해야 한다.