02 템플릿 구문 06

어트리뷰트, 클래스 및 스타일 바인딩

템플릿 구문은 프로퍼티 바인딩에 적합하지 않은 시나리오에 대해 특수 단방향 바인딩을 제공합니다.

 

어트리뷰트 바인딩

어트리뷰트 바인딩을 사용하여 직접 어트리뷰트 값을 설정할 수 있습니다.

이 가이드에서는 프로퍼티 바인딩을 사용하여 엘리먼트 프로퍼티를 설정하는 것이 항상 문자열로 어트리뷰트를 설정하는 것보다 더 바람직하다고 강조합니다. 그럼 Angular가 어트리뷰트 바인딩을 제공하는 이유는 무엇입니까?

바인드 할 엘리먼트 프로퍼티가 없을 때 어트리뷰트 바인딩을 사용해야합니다.

ARIA, SVG 및 테이블 스팬 어트리뷰트를 고려해볼 때, 이것들은 순수한 어트리뷰트입니다. 엘리먼트 프로퍼티에 해당하지 않으며 엘리먼트 프로퍼티를 설정하지 않습니다. 바인딩 할 프로퍼티 대상이 없습니다.

이 사실은 여러분이 아래와 비슷한 것을 쓸 때 고통스럽게 명백해집니다.

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>

그러면 다음과 같은 오류가 발생합니다.

Template parse errors: Can't bind to 'colspan' since it isn't a known native property

메시지에서 말한 것처럼 <td> 엘리먼트에는 colspan 프로퍼티가 없습니다. "colspan"어트리뷰트가 있지만 보간 및 프로퍼티 바인딩은 어트리뷰트가 아닌 프로퍼티만 설정할 수 있습니다.

이러한 어트리뷰트를 작성하고 바인드하려면 어트리뷰트 바인딩이 필요합니다.

어트리뷰트 바인딩 구문은 프로퍼티 바인딩과 비슷합니다. 괄호 사이의 엘리먼트 프로퍼티 대신 접두어 attr과 점 (.) 및 어트리뷰트 이름으로 시작하십시오. 그런 다음 문자열로 해석되는 표현식을 사용하여 어트리뷰트 값을 설정합니다.

[attr.colspan]을 계산 된 값에 바인딩 :

src/app/app.component.html

<table border=1>   <!--  expression calculates colspan=2 -->   <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>     <!-- ERROR: There is no `colspan` property to set!     <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>   -->     <tr><td>Five</td><td>Six</td></tr> </table>

다음은 표가 표시된 방식입니다.

어트리뷰트 바인딩의 주요 사용 사례 중 하나는 다음 예제와 같이 ARIA 어트리뷰트를 설정하는 것입니다.

src/app/app.component.html

<!-- create and set an aria attribute for assistive technology --> <button [attr.aria-label]="actionName">{{actionName}} with Aria</button>

 

클래스 바인딩

클래스 바인딩을 사용하여 엘리먼트의 클래스 속성에서 CSS 클래스 이름을 추가하거나 제거 할 수 있습니다.

클래스 바인딩 구문은 프로퍼티 바인딩과 비슷합니다. 대괄호 사이에 엘리먼트 프로퍼티 대신 접두어 클래스로 시작하고 선택적으로 점 (.)과 CSS 클래스 이름 [class.class-name]을 붙이십시오.

다음 예제는 클래스 바인딩을 사용하여 응용프로그램의 "특수"클래스를 추가하고 제거하는 방법을 보여줍니다. 바인딩없이 어트리뷰트를 설정하는 방법은 다음과 같습니다.

src/app/app.component.html

<!-- standard class attribute setting  --> <div class="bad curly special">Bad curly special</div>

이를 원하는 클래스 이름의 문자열에 바인딩으로 바꿀 수 있습니다. 이것은 전부 또는 일부 대체 바인딩입니다.

src/app/app.component.html

<!-- reset/override all class names with a binding  --> <div class="bad curly special"      [class]="badCurly">Bad curly</div>

마지막으로 특정 클래스 이름에 바인딩 할 수 있습니다. Angular는 템플릿 표현식이 true로 평가 될 때 클래스를 추가합니다. 표현이 거짓 일 때 클래스를 제거합니다.

src/app/app.component.html

<!-- toggle the "special" class on/off with a property --> <div [class.special]="isSpecial">The class binding is special</div>   <!-- binding to `class.special` trumps the class attribute --> <div class="special"      [class.special]="!isSpecial">This one is not so special</div>

 

스타일 바인딩

스타일 바인딩으로 인라인 스타일을 설정할 수 있습니다.

스타일 바인딩 구문은 프로퍼티 바인딩과 비슷합니다. 대괄호 사이에 엘리먼트 프로퍼티 대신 접두사 style로 시작하고 그 뒤에 점 (.) 및 CSS 스타일 프로퍼티 이름이[style.style-property] 옵니다.

src/app/app.component.html

<button [style.color]="isSpecial ? 'red': 'green'">Red</button> <button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

일부 스타일 바인딩의 스타일에는 단위 확장자가 있습니다. 다음 예제는 "em"및 "%"단위로 글꼴 크기를 조건부로 설정합니다.

src/app/app.component.html

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button> <button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>