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 # symbolinside 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.