Angular 데이터 바인딩 및 소소한 정리

Angular 데이터 바인딩 및 소소한 정리 

class binding

 <!--다항 클래스 바인딩 -->
<div [class]="표현식"></div>

 <!-- 단항 클래스 바인딩 -->
<div [class.myClass]="표현식"></div>

 <!-- 다항 클래스 바인딩과 비슷하지만 바인딩 방식인 문자열/배열/객체 3종류로 적용할 수 있다.-->
<!-- 여러개의 클래스를 다채롭게 적용할때 사용 -->
<div [ngClass]="map객체"></div>

style binding

<!-- 단일 스타일 속성을 식의 결과로 설정하는 데 사용되는 바인딩-->
<div [style.myStyle]="표현식"></div>
 
<!--스타일 값의 단위( units )를 대상의 일부로 지정할 수 있다.-->
<div [style.myStyle.units]="표현식"></div>

<!-- ex) 아래 단위적용이 어떻게 되는지 유심히 살펴보자 -->
<div [style.fontSize]="30px">first</div>
<div [style.fontSize.px]="30">first</div>

<!--style 어트리뷰트에 바인딩-->
<div [ngStyle]="map객체"></div>

<!-- ex) 아래 isRedColor 의 값은 boolean값이라 가정한다.-->
<div [ngStyle]="{fontSize:'30px', 'margin.px':100, color:isRedColor? 'red':'green' }">first</div>

데이터 바인딩 주의사항

1. id 어트리뷰트와 id 프로퍼티는 1:1 매핑한다.

2. class 어트리뷰트는 classList 프로퍼티로 변환된다.

3. td 요소의  colspan 어트리뷰트의 경우 매핑하는 프로퍼티가 존재하지 않는다.

4. textContent 프로퍼티의 경우 대응하는 어트리뷰트가 존재하지 않는다.

5. input 요소의 value 어트리뷰트는 value 프로퍼티와 1:1 매핑하지만 서로 다르게 동작한다.

ngTemplateOutlet 디렉티브는 지정된 위치에서 콘텐츠 블록을 반복하는 데 사용되며, 다른 위치에서 동일한 콘텐츠를 생성해야하고 중복을 방지하려는 경우에 유용.

<ng-template #titleTemplate let-text="title">
  <h4 class="p-2 bg-success text-white">{{text}}</h4>
</ng-template>

<ng-template [ngTemplateOutlet]="titleTemplate"
             [ngTemplateOutletContext]="{title: 'Header'}">
</ng-template>

<div class="bg-info p-2 m-2 text-white">
  There are {{getProductCount()}} products.
</div>

<ng-template [ngTemplateOutlet]="titleTemplate"
             [ngTemplateOutletContext]="{title: 'Footer'}">
</ng-template>

컨텍스트 데이터를 수신하기 위해 반복되는 내용을 포함하는 ng-template 요소는 ngFor 지시문에 사용되는 확장 구문과 비슷한 변수 이름을 지정하는 let 속성을 정의. 표현식의 값은 let-변수 에 다음과 같은 값을 할당.

<ng-template  #titleTemplate  let-text="title">

이 예제의 let- 속성은 표현식 title 을 평가하여 값이 할당되는 text라는 변수를 만든다.

표현식이 평가되는 데이터를 제공하기 위해 ngTemplateOutletContext 지시문이 적용된 ng-template 요소는 다음과 같이 map객체를 제공한다.

<ng-template [ngTemplateOutlet]="titleTemplate"
         [ngTemplateOutletContext]="{title: 'Footer'}">
</ng-template>

신규 바인딩의 대상은 ngTemplateOutletContext이며 다른 지시문처럼 보이지만 실제로는 일부 지시어가 데이터 값을 받기 위해 사용하는 입력 속성의 예이다.

바인딩에 대한 표현식은 let-속성 이름이 일치하는 다른 ng-template 요소이다. 

결과적으로 ngFor 디렉티브와 같이 반복되는 내용을 바인딩을 사용하여 조정할 수 있다.