앵귤러 템플릿 - attribute binding

HTML에는 요소 (element)가 존재합니다. 그리고 각 요소마다 가질 수 있는 속성 (attribute)이 존재하는데요. 앵귤러 attribute binding은 이러한 HTML요소의 속성을 동적으로 바꿀 수 있게 해 줍니다.

 

사용방법

템플릿에서 변화를 주고자 하는 속성을 아래와 같이 ( [ ] ) 꺽쇠로 감싸줍니다. property 바인딩과 차이점은 꺽쇠 안에 'attr'라는 이름으로 해당 요소가 가진 속성들을 부른 뒤 마침표로 속성 (HTML 속성이름과 정확하게 일치)을 특정하여 그 값을 변화시킨다는 점입니다.

<img [attr.src]="url" /> <!-- attr가 해당 요소가 가지는 모든 속성 -->

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

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

@Component({
  selector: 'property-binding-root',
  templateUrl: './property-binding.component.html',
  styleUrls: ['./property-binding.component.css']
})

export class PropertyBindingComponent implements OnInit {
  url:string = 'propertyBinding url'
  constructor() {}

  ngOnInit(): void {} 
}

 

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

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

 

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

 

 

마무리

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

 

---

 

참고

Angular