Angular - 5.11-Use of local references in templates

Sometimes you do not want to bind a value through a class property — you just need a quick handle on a DOM element from inside the template itself. Angular provides local references, also called template reference variables, exactly for that purpose. They expose an element (or a directive instance) under a name you choose, available anywhere in the same template.

To declare a local reference, prefix the variable name with a hash (#) on the HTML element you want to capture. Angular evaluates the reference to the underlying HTMLElement (or directive instance for some specific cases) and lets you read from it anywhere later in the template, including in event handlers and other bindings.

<input type="text" #serverNameInput>
<button (click)="onAdd(serverNameInput.value)">Add</button>

In this snippet the input element is exposed as serverNameInput inside the template. When the user clicks the button, Angular passes the current value of the input straight to the component method. There is no need for an [(ngModel)] two-way binding nor for storing the keystrokes on the class — perfect for one-off reads at the moment of an event.

Local references shine when you want to keep the component class lean. They are scoped to the template that declares them and cannot be accessed from the TypeScript class directly. The moment you need to read the same element from inside a method, or you require the reference before any user interaction has occurred, the next tool to reach for is @ViewChild, covered in the upcoming lesson.