How to use template reference variables in angular

Template reference variables allow us to transfer data from one part of a template to another or across different templates. They are useful when we need to handle user input or form data. They let us access parts of our templates, whether that be an element, component, or directive. Let’s review the four basic ways of using template reference variables in our Angular application.

Syntax

The simplest way to refer to any part of our Angular template is by using a template reference variable name prepended with a # symbol. This way, we can use the referred element anywhere inside our template.

DOM element

The following example highlights how to reference any DOM element, for example, an HTML input element.

• app.component.html: Look at lines 14 and 15, the #educative_user_input1 template reference variable refers to the input tag. We use this to pass the value of the input element to the alert_educative_user function. This function is called when the submit button is clicked.

• app.component.ts: The alert_educative_user updates the educative_user_input variable. This function will display the user’s input in an alert box.

The ng-template element

Template references can also be used with ng-templates. These structural directivesStructural directives add or remove elements from a DOM. are wrappers that enclose other HTML elements. We can refer to them in other sections of our template and render them accordingly.

• app.component.html: The lines 13 to 15 utilize a ng-template to enclose an h1 element. We refer to the ng-template using the template reference variable educative_ng_template.

• app.component.ts: Use TemplateRef to access the ng-template inside the app component and the ViewChild decorator to inject the educative_ng_template as an instance of TemplateRef class inside the app component. While TemplateRef contains the reference to the template defined in ng-template, ViewContainerRef refers to the element that hosts the component. The createEmbeddedView adds the template inside the component.

Component

Like a DOM element or ng-template, we can reference a component. This is particularly useful for accessing child components’ public attributes and methods inside parent components.

Use the following syntax to refer to any child component’s public attributes or functions within the parent.

• app.component.html: The <app-educative-component #educatives_child_component></app-educative-component> will render the child’s content inside the app component. The #educatives_child_component is a template reference variable that refers to the entire child component.

• educative-component.component.ts: We declare a childs_test_string string that can be accessed inside our app component via the template reference variable.

Directive

Angular directives add or remove elements from the DOM. They are extensions of HTML elements. Thus, like any other HTML element, they can be referenced with template reference variables.

• app.component.html: The hidden-div custom directive is applied to the div element. We use the template reference variable #educatives_template_reference_variable to refer to this directive.

• app.module.ts: To utilize the newly created directive in the codebase, ensure that it is included under declarations so that it is recognized as part of the app module.

• hidden-div.directive.ts: This file creates an Angular directive. We’ll apply this directive with the name hidden-div on any element inside our app component. We’ve saved the reference of the element on which the directive will be applied on using ElementRef. The reference of the element upon which the directive is applied will be saved inside the educatives_directive variable. Upon running the example above we’ll see that a yellow highlight will appear on top of the referenced element because of this.

Conclusion

In conclusion, template reference variables provide a shorter alternative to access DOM elements, components, and directives, unlike other referencing mechanisms like event listeners.