<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이벤트는 바인딩대상이 되며 바인딩에 할당되는 것은 클래스 인스턴스의 프로퍼티가 된다.
좌항은 엘리먼트의 프로퍼티(이벤트)가 되고 우항은 클래스 프로퍼티가 된다.
또한 클래스 프로퍼티는 표현식이 될 수 있다.
템플릿에서 동적으로 변경되는 문자열에는 문자열바인딩을 사용하고 엘리먼트의 속성이 동적으로 변경되어야 할때는 프로퍼티바인딩을 사용한다.