템플릿에 사용되는 {{ }}는 Text interpolation 기호이며 최종 결과물을 문자열타입으로 반환한다.
{{1+1}}, {{ age }}, {{ 1 + age + getVal() }} 등 표현식을 사용할 수 있다.
<span>{{getVal()}}</span>getVal() 반환하는 값이 동적으로 변한다면 앵귤러는 랜더링하여 갱신한다.
<img src="itemImageUrl">itemImageUrl이 동적으로 변한다면 이미지도 변경된다.
{{ 표현식 }} 표현식에는 컴포넌트 클래스인스턴스 프로퍼티를 사용할 수 있다. 표현식의 컨텍스트는 클래스인스턴스가 된다.
<img [src]="itemImageUrl2">
<input [value]="'a'+getVal()">요소노드 속성에 바인딩되는 표현식에는 {{}}기호를 사용하지 않고 문자열내에 사용하지만 {{}}기호와 같은 방식으로 사용한다.
[]괄호를 사용하면 속성에 바인딩임을 명시하는 것이다.
[src]="itemImageUrl2"
좌측은 요소노드의 속성
우측은 클래스인스턴스 프로퍼티
<ul>
<li *ngFor="let customer of customers">{{customer.name}}</li>
</ul><input #customerInput value="123">{{customerInput.value}}템플릿 참조변수
템플릿표현식은 멱등성을 고려해야 하고 간단히 작성해야 한다.
앵귤러는 컴포넌트 변화감지를 수시로하기때문에 템플릿표현식이 복잡해 부하를 발생시키지 않야야 한다.
템플릿실행문
<button (click)="deleteHero()">Delete hero</button>(이벤트) = "템플릿실행문"
템플릿표현식과 같이 클래스인스턴스가 실행문의 컨텍스트가 된다.
<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>템플릿 HTML에서 지원하는 객체와 디렉티브 변수등을 호출함수의 인수로 사용할 수 있다
