템플릿변수

컴포넌트 템플릿영역내에서 엘리먼트에 템플릿변수를 지정하면 템플릿문법에 지정엘리먼트를 참조할 수 있다.

<input #phone />

<button (click)="callPhone(phone.value)">Call</button>

위와 같이 엘리먼트내에 #기호와 식별자를 사용하면 해당 엘리먼트를 참조하는 템플릿변수가 만들어진다.

HTML엘리먼트, 컴포넌트, 디렉티브, ng-template...에 사용가능하다.

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">

템플릿변수 오른쪽에 이름을 지정하면 디렉티브/컴포넌트에서 exportAs로 선언된 이름에 해당하는 인스턴스를 참조한다.

ngForm디렉티브를 참조하는 템플릿변수를 만드었으며 #itemForm만 사용하면 HTML폼엘리먼트를 참조하는 템플변수가 만들어질 것이다.

ngForm디렉티브 템플릿변수를 사용하면 itemForm.valid와같은 추가적인 프로퍼티도 사용할 수 있어 유효성검사를 쉽게 할 수 있게 된다.

템플릿 변수를 참조할 수 있는 범위

<input #inp *ngIf="true" type="text" >
{{inp.value}}
------------------------------------------
<ng-template [ngIf]="true">
  <input #inp type="text" />  
</ng-template>
{{inp.value}}

중첩엘리먼트 내부에서 템플릿변수를 사용하면 외부에서 접근이 되지 않는다.

< ng-template> 템플릿변수사용

<ng-template #ref3></ng-template>
<button (click)="log(ref3)">Log type of #ref</button>

ng-template을 사용하여 컨텐츠를 다룰때 필요하다.