Angular의 템플릿 변수
Angular에서는 템플릿 변수를 사용하여
페이지 태그에 접근할 수 있습니다.
템플릿 변수는 태그를 변수에 바인딩하고
컴포넌트 동작 중에 참조할 수 있게 해줍니다.
이러한 변수를 선언하려면 변수 이름 앞에
# 기호를 붙여야 합니다.
실제 예시를 살펴보겠습니다. 예를 들어, div가 있다고 가정합시다. 이 div를 템플릿 변수에 기록해 보겠습니다:
<div #userName>
text
</div>
이제 userName 변수에는 우리 div의
DOM 요소에 대한 참조가 담기게 됩니다.
그리고 우리는 이 변수를 순수 JavaScript에서
하는 방식으로 다룰 수 있습니다.
예를 들어, 이 div의 텍스트를 다른 태그에
출력해 보겠습니다:
<div>
{{ userName.textContent }}
</div>
div가 주어졌습니다. 이미지가 주어졌습니다.
이미지에 대한 참조를 템플릿 변수에 기록하세요.
div 내부에 우리 이미지의 src를 출력하세요.
