Template Reference Variable in Angular

This guide explains the Template Reference Variable in Angular. We find out what template reference variable is. How to define and use it in Angular.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

Template Reference Variable

The Template reference variable is a reference to any DOM element, component or a directive in the Template. We can use it elsewhere in the template. We can also pass it to a method in the component. It can contain a reference to elements like h1, div, etc

Defining Template Reference variable

We declare Template reference variables using # followed by the name of the variable ( #variable). We can also declare them using #variable="customer" when the component/directive defines a customer as the exportAs Property.

For Example

HTML Element

Component/Directive

Component/Directive with exportAs

Template Reference variable Example

Now let us create a simple sample application to learn how to use a template reference variable

Create a new application

HTML Element

The following Example code defines the #firstName & #lastName template reference variables. They both contain the reference to the input HTML Element.

The input elements contain the value property. Hence we can use it to display the welcome message as shown below.

app.component.html

We have used (keyup)="0" on the input element. It does nothing but it forces the angular to run the change detection. change detection, in turn, updates the view.

The Angular updates the view, when it runs the change detection. The change detection runs only in response to asynchronous events, such as the arrival of HTTP responses, raising of events, etc. In the example above whenever you type on the input box, it raises the keyup event. It forces the angular to run the change detection, hence the view gets the latest values.

Pass Variable to Component class

You can also pass the variables to the component as shown below. Add this code app.component.html

Add this to app.component.ts


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

Component/Directive

You can get a reference to the component or directive. Refer to the tutorial on How to create child/nested component in Angular

Create a new component customer-list.component.ts

customer-list.component.html

customer.ts

app.component.html

ExportAs

Sometimes there could be more than one directive on a DOM Element.

For Example in the following code has two directives. In such a case, we need to specify which directive to use for #variable.

The components or directives can use exportAs to export the component/directive in a different name.

For Example, open the customer-list.component and add the exportAs:'customerList' under the @Component metadata

Now you can use it a

The safe navigation operator ( ? )

The selectedCustomer is null when the app starts for the first time. It gets its value only when the user clicks on the select button. Hence we use ? or a safe navigation operator to guard against null or undefined value.

Without ? the app will throw error and stops

Template Driven Forms

The ngForm directive uses the exportAs to export an instance of itself using the name ngForm. We use this in the template-driven forms in Angular.

Now, you can check value and validate the status of the form within the template

Template Input Variable

The Template reference variable must not be confused with the Template input variable, which we define using the let keyword in the template.

For Example, check the ngFor loop in the customer-list.component.html. The variable customer is a template input variable

Variable Scope

The scope of the template reference variable is the template within which it is declared. You cannot access it outside the template.

Hence any variable declared in CustomerListComponent cannot be accessed from the app component although we render the customer list within the app component.

Child scope

Also, note that we can create a new child template scope (nested scope) by using the directive ng-template . Also the structural directive like ngIf, ngFor, etc also creates their own child scope.

The following is an example of the <ng-template> directive. The address variable defined inside the ng-template is not accessible outside it.

ngIf Example

References

Summary

The Template reference variable is a reference to any DOM element, component or a directive in the Template. Use #variable to create a reference to it. We can also use #variable=”exportAsName” when the component/directive defines an exportAs metadata. The template variable can be used anywhere in the template. The variable can be passed the component as an argument to a method. The Template reference variable is different from the template input variable which we define using the let keyword within the template. They are Template scoped. Also, make use of the safe navigation operator ?, if you expect a null value.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top