What is an Angular template reference variable and how to use it?

The angular template reference variable is often a reference to a DOM element, child component, or directive within a template so we can access and manipulate it in our component. A template reference variable is a reference to one or more elements within a template.

When to use Angular template reference?

The angular template reference variable is simply a named reference to a DOM element within a template. It is similar to the id attribute of an HTML element. We can mark a DOM element with a template reference and then query it inside a class using the ViewChild decorator.

We can use template reference either directly in the template or pass argument in method from template to component typescript. If we use template reference with viewChild decorator and then we can directly access elements inside the class of components.

Syntax of Angular template reference variable

<input #localReferenceName>

Notice that in the input tags we used the #hashtag to tell Angular to assign this tag to a local variable. The # symbol in our input tag is a way of declaring local references and these are known as template reference variables. The input element has an attribute whose name starts with the # character, which is used to define a variable to refer to the element in the template’s data bindings.

You add a hashtag with the name of your choice, like for example student name in the example below. This reference will hold a reference to this element as the whole HTML element we can access to input by access value property of an element. Once we create a reference we can use this reference everywhere in our template but not inside typescript code.

Example of an Angular template reference variable.

We will create a simple example to add a local reference to input and pass the local reference in the method as an argument on a button in the template. Let’s first create a project.

Angular template reference variable example — Local references show elements of the input itself

ng new myApp

Edit the app.component.html to add template reference on input as

<input type="text" class="form-control" #nameInput>
<button class="btn btn-primary" (click)="onAddName(nameInput)">Add name</button>

In typescript of app.component.ts, we can access input value as

onAddName(nameInput: HTMLInputElement) {
  console.log(nameInput.value);
}

An angular template reference variable can only be accessed inside the template. We can use a template reference variable with @viewChild decorator to reference it and access it directly inside the component typescript file. For more information on the angular template reference variable please check an official document of angular.

Angular template variable to add validation in template form

Let’s demonstrate, how we can use Angular template variable to add ng validation in Angular template form, using native HTML built-in in form validation elements like required, email, minLength, and maxLength, etc.

In our Angular form, we can add form control validation like required, minLength, and validate email filed. We need to add a user data object in the component typescript file.

 user: any = { name: '', email: null, age: '' };

In our component template file, let’s add the ngModel directive and validation element to the input field.

<section>
 <form>
   <div class="form-group">
    <label for="exampleInputEmail1">User name</label>
    <input class="form-control" [(ngModel)]="user.name" name="name" required 
      minlength="4" #nameCtrl="ngModel">
    </div>
    <div *ngIf="nameCtrl.touched" class="invalid-feedback">
      <p *ngIf="nameCtrl.errors?.required">
       Name is a required field!
      </p>
      <p *ngIf="nameCtrl.errors?.minlength">
       Please enter name with minimum 4 character
      </p>
    </div>

    <div class="form-group">
      <label for="exampleInputEmail1">User email</label>
      <input class="form-control" type="email" [(ngModel)]="user.email"     
       name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required 
       #emailCtrl="ngModel">
    </div>
    <div *ngIf="emailCtrl.touched" class="invalid-feedback">
      <p *ngIf="emailCtrl.errors?.required">Email is a required field!</p>
      <p *ngIf="emailCtrl.errors?.pattern">This is not a valid Email!!!</p>
    </div>

    <div class="form-group">
      <label for="exampleInputPassword1">User Age</label>
      <input class="form-control" [(ngModel)]="user.age" name="age" type="number" 
      #ageCtrl="ngModel" required>
    </div>

    <div class="invalid-feedback" *ngIf="ageCtrl.errors?.required && 
      ageCtrl.touched">
      Age is required
    </div>

    <button (click)="setUserData()" class="btn btn-primary">
      Set data from Model to View
    </button>
  </form>
  <div>
    <span>Name: {{ user.name }}</span>
    <span>Email: {{ user.email }}</span>
    <span>Age: {{ user.age }}</span>
  </div>
</section>

We add # hash like this on all input to get the reference, in the input user name, we add #nameCtrl=”ngModel” This is an Angular template variable. Now we can use this template variable to check input validation as we did above

In our template form, we added the following validation type.

We had added the required and minLength 4 validation attributes on the input name.
We have added requirements and patterns to validate the email.
Add required validation on age input.

Now, the question comes, how we can access form control state. To get individual form control state, we had added reference on each input field with # with reference name. Using this reference we can check the control state of each individual input field in template form.

Related articles

Angular template reference variable in detail