Template Variable to Interact with Child Components in Angular 2+

I have already discussed in my last couple of blogs to interact Components using @Input and @Output. Here I am going to explain about Template Variable to interact with Child Components. By using this Template reference variable you can access public properties and methods of a child component and also to bind data to a child component.
Template Reference Variable allow you to specify a variable name on a component and you can access any public property or methods on that component using that variable.

In order to demonstrate I have a product card component which is my child component placed inside the  ProductListComponent(parent component) to list some products. You can see I have added a template reference variable named #productReference on this child component

So over here in our ProductCardComponent will just a create a method and property to access from the ProductListComponent

Now you can access this property and method from the ProductListComponent