Angular의 템플릿 변수

Angular에서는 템플릿 변수를 사용하여 페이지 태그에 접근할 수 있습니다. 템플릿 변수는 태그를 변수에 바인딩하고 컴포넌트 동작 중에 참조할 수 있게 해줍니다. 이러한 변수를 선언하려면 변수 이름 앞에 # 기호를 붙여야 합니다.

실제 예시를 살펴보겠습니다. 예를 들어, div가 있다고 가정합시다. 이 div를 템플릿 변수에 기록해 보겠습니다:

app/app.component.html<div #userName>
  text
</div>

이제 userName 변수에는 우리 div의 DOM 요소에 대한 참조가 담기게 됩니다. 그리고 우리는 이 변수를 순수 JavaScript에서 하는 방식으로 다룰 수 있습니다. 예를 들어, 이 div의 텍스트를 다른 태그에 출력해 보겠습니다:

app/app.component.html<div>
  {{ userName.textContent }}
</div>