Using Template Reference variable in Angular

In this article, we will discuss the use of a template reference variable for component communication.

A template reference variable is used to give reference to a DOM Element, a component, directive, or a web component within a template. This variable can then be used anywhere inside the template.

This is done using a # symbol inside the template. Let us see how it is done.

 

 

 

 

https://gist.github.com/NishuGoel/42672fd54bca1f766835cc99e21dbcc6

Inside the typescript file, let us simply display the value of the template reference variable using console.log

 

 

https://gist.github.com/NishuGoel/f392a7f696fb573d16390ef73910549d

So this is how we create a template reference variable and use it anywhere inside the template.

Leave a comment

Your email address will not be published. Required fields are marked *