앵귤러 템플릿 - property binding

HTML에는 요소 (element)가 존재합니다. 그리고 각 요소마다 가질 수 있는 속성 (attribute)이 존재하는데요. 앵귤러 property binding은 이러한 HTML요소의 속성과 상응하는 DOM property를 동적으로 변화시키는 기능을 합니다.

 

사용방법

사용하는 방법은 템플릿에서 변화를 주고자 하는 속성을 아래와 같이 다양한데요 주로 꺽쇠를 사용하는 문법을 많이 사용합니다. 

<!-- property-binding.component.html -->

<h1 [textContent]="image.title"></h1>
<img [src]="image.src" bind-alt="image.alt" height="{{image.height}}">

변수명을 사용할 경우 해당 TypeScript 클래스에서 반드시 사용된 변수명을 제공해 주어야 합니다.

// property-binding.component.ts

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

@Component({
  selector: 'app-property-binding',
  templateUrl: './property-binding.component.html',
  styleUrls: ['./property-binding.component.css'],
})
export class PropertyBindingComponent implements OnInit {
  image: { title:string, src: string; alt: string, height:string };
  constructor() {
    this.image = {
      title: "random image",
      src: 'https://source.unsplash.com/random',
      alt: 'random picture',
      height: "300"
    };
  }

  ngOnInit(): void {}
}

사용빈도가 적긴 하지만 동적가치 말고 일반 문자도 사용가능합니다. 일반문자는 큰따옴표 안에 따옴표를 써서 구현합니다.

<img [src]="'url'" /> <!-- string을 사용하는 방법 -->

 

주의할 점은 속성이 기대하는 타입과 제공되는 가치의 타입이 일치해야 한다는 점입니다.

<input type="text" [value]="" /> <!-- 문자를 반환하는 값이 들어가야함 -->
<input type="number" [value]="" /> <!-- 숫자를 반환하는 값이 들어가야함 -->

 

참고로, attribute와 property는 미묘한 의미의 차이를 가집니다. 그래서 attribute 바인딩은 조금 다른 문법을 가지는데요. 사용법은 아래와 같습니다.

<input [attr.disabled]="condition ? 'disabled' : null">

보이는 것처럼 반환된 값이 'true'인지 'false'인지 여부에 따라 작동하는 property 바인딩과 다르게 attribute 바인딩은 반환된 값이 'null'인지 아닌지로 작동합니다.

 

소스코드

https://github.com/jin-co/web-mobile/tree/master/Angular/cheat-sheet/propertyBinding

GitHub - jin-co/web-mobile

이상으로 앵귤러 property binding에 대해서 알아보았습니다.

 

---

 

참고

Angular