템플릿 실행문은 템플릿코드에서 사용자이벤트에 대응하는 템플릿문법이다.
문자열 바인딩의 표현식에도 클래스 인스턴스 메소드를 호출할 수 있지만 이것은 값을 반환하여 템플릿에서 문자열로 표현하기 위한 수단에 국한된다.
템플릿 실행문은 어플리케이션에 필요한 로직들을 수행한다.
<button (click)="deleteHero()">Delete hero</button>위와 같이 {{ }} 기호를 사용하지 않으며 ""따옴표내에 사용되며 왼쪽에 템플릿 실행문을 호출하는 소스가 있어가 한다.
템플릿 실행문은 엘리먼트, 컴포넌트, 디렉티브에 모두 사용할 수 있다.
템플릿 실행문 파서는 문자열바인딩파서와 다르며 문자열바인딩 파서기능과 더불어 =와 같은 할당문법을 지원하며 ;(세미콜론)도 지원하여 체이닝문법을 사용할 수 있다.
실행문 컨텍스트
템플릿 실행문은 애플리케이션의 특정 컨텍스트 안에서 동작한다.
실행문 컨텍스트는 일반적으로 컴포넌트 인스턴스와 같기 때문에 실행문 컨텍스트 안에 있는 것만 참조할 수 있다.
<button (click)="deleteHero()">Delete hero</button>deleteHero는 컴포넌트내 클래스 인스턴스 메소드이므로 참조사용할 수 있다.
실행문 컨텍스트내부의 템플릿 컨텍스트를 구분하자.
<button (click)="onSave($event)">Save</button>event은 템플릿 자체 컨텍스트의 프로퍼티다. 템플릿 컨텍스트는 button요소노드가 되면 버튼이벤트의 $event프로퍼티를 템플릿문법에서 사용이 가능하다.기호를 사용해야 템플릿자체의 프로퍼티임을 알 수 있다.
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>템플릿 입력변수를 참조할 수 있다.
템플릿 실행문은 메소드를 호출하거나 간단한 프로퍼티 조작정도로 최대한 간결하게 작성해야 한다.
<h2>Pick a highlight color</h2>
<div>
<input type="radio" name="colors" (click)="color='lightgreen'">Green
<input type="radio" name="colors" (click)="color='yellow'">Yellow
<input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>
<p [appHighlight]="color">Highlight me!</p>appHighlight는 디렉티브이며 @Input입력프로퍼티를 전달할 수 있다.
color는 클래스프로퍼티로 디렉티브에 바인딩되어있으며 템플릿실행문은 표현식이 가능하며 위와같이 클래스프로퍼티에 값할당도 가능하다.
; 세미콜론으로 여러 실행을 할 수있다.
