템플릿변수를 사용하면 템플릿내부에 있는 아래 컨텐츠를 참조하는 변수를 만들며 참조한 인스턴스에 접근할 수 있다.
- DOM 엘리먼트
- 디렉티브
- 엘리먼트(ng-template...)
- TemplateRef
- 웹 컴포넌트
<input #phone placeholder="phone number" />
<button (click)="callPhone(phone.value)">Call</button>input DOM엘리먼트를 #phone로 템플릿변수를 선언한다.
placeholder="phone number"의 "phone number"은 템플릿표현식이 아니므로 내부에 있는 phone는 단순한 문자열이다.
"callPhone(phone.value)"은 템플릿표현식이며 내부의 phone는 템플릿변수를 참조한다.
템플릿변수는 선언된 위치에 따라 참조하는 인스턴스의 타입이 결정된다.
-
컴포넌트에 템플릿변수를 선언하면 컴포넌트 인스턴스를 참조한다.
-
HTML요소노드에 템플릿변수를 선언하면 DOM요소노드를 참조한다.
-
< ng-template >엘리먼트에 템플릿변수를 선언하면 TemplateRef 인스턴스를 참조한다.
-
#var="ngModel"과 같이 템플릿변수 오른쪽에 이름을 지정하면 디렉티브/컴포넌트에서 exportAs 이름에 해당하는 인스턴스를 참조한다.
#var="ngModel"은 우항의 컴포넌트 또는 디렉티브에 exportAs로 정의된 인스턴스가 초기화설정되도록 되어있다.
이렇게 하는 이유는 템플릿태그문법에는 자바스크립트를 사용할 수 없기때문에 노드들을 참조하여 사용할 수 가 없다. 따라서 앵귤러가 노드들을 참조하여 사용할 수 있도록 제공해야 하기때문에 템플릿변수를 도입한 것이다.
다른 요소노드와 달리 ngForm디렉티브는 form프로퍼티를 제공하여 itemForm.form.valid와같이 유효성검사를 사용할 수 있다.
