JavaScript frameworks like Angular provide great abstractions and useful APIs on top of the native Document Object Model (DOM) that can make your codebase more readable, maintainable, and efficient. But what do you do when you need to directly access an HTML element on the DOM in a manner that is type-safe?

Angular’s template reference variables provide a useful API through which you can interact with DOM elements and child components directly in your Angular code. In the sections that follow, you will learn what template reference variables are and how you can use them in your Angular components and services to gain low-level, manual control over the template elements that you are referencing.

Getting Started

To get started using template reference variables, simply create a new Angular component or visit an existing one. To create a template reference variable, locate the HTML element that you want to reference and then tag it like so: #myVarName. In the code below, a template reference variable is created that references the <div> with id test-div.

<div id="test-div" #myTestDiv>
</div>  

#angular