programming/Angular
[Angular] 템플릿 참조 변수 (#)
헤써니
2020. 6. 21. 14:21
템플릿 참조 변수(#) 란
템플릿 요소 내에 있는 DOM 요소를 참조합니다. 또한 directive ( component를 포함하는 ), 요소, TemplateRef 또는 웹 컴포넌트를 참조할 수도 있습니다.
사용예
|
<input #phone placeholder="phone number" />
|
위와 같이 사용한 값은 아래와 같이 활용할 수 있습니다.
|
<!-- lots of other elements -->
<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>
|
특징
1. 템플릿 참조변수 (#phone) 는 input 변수 (let phone)와는 다릅니다.
2. 참조 변수의 범위는 전체 템플릿입니다. 따라서 하나의 템플릿 안에서 템플릿 참조변수명은 두개 이상 사용되어선 안됩니다.
3. # 대신에 ref-를 사용하는 것도 가능합니다.
더 자세한 설명은 공식사이트를 확인해주세요.
https://angular.io/guide/template-syntax#template-reference-variables-var