text interpolation 문자열바인딩, 프로퍼티바인딩의 차이점

lee jae hwan·2022년 10월 6일

앵귤러

목록 보기
82/83
<app-product-alerts sub_product="{{super_product}}" >
   </app-product-alerts>
<app-product-alerts [sub_product]="super_product" >
   </app-product-alerts>

차이가 무엇인가?


text interpolation 문자열바인딩

표현식의 평가결과 값을 문자열로 변환한다.

클래스 프로퍼티( 클래스필드 또는 메소드 )를 사용하면 동적으로 뷰를 변경할 수 있다.


프로퍼티바인딩은 템플릿 엘리먼트의 프로퍼티 또는 어트리뷰트에 클래스 프로퍼티를 바인딩하는 것으로 문자열뿐만 아니라 이외 타입의 값을 바인딩할 수 있다.

클래스 프로퍼티의 값이 변경됨에따라 엘리먼트 속성을 변경할 수 있다.

이벤트바인딩

<button
  [disabled]="canClick"
  (click)="sayMessage()">
  Trigger alert message
</button>

소괄호를 사용하며 click은 해당 엘리먼트의 이벤트다.

disabled프로퍼티, click이벤트는 바인딩대상이 되며 바인딩에 할당되는 것은 클래스 인스턴스의 프로퍼티가 된다.

좌항은 엘리먼트의 프로퍼티(이벤트)가 되고 우항은 클래스 프로퍼티가 된다.

또한 클래스 프로퍼티는 표현식이 될 수 있다.


템플릿에서 동적으로 변경되는 문자열에는 문자열바인딩을 사용하고 엘리먼트의 속성이 동적으로 변경되어야 할때는 프로퍼티바인딩을 사용한다.

0개의 댓글