What is template reference variable in Angular

 As we belongs to Web application developer so most of the times we need the data of an event in our applications. So If we talk about the Angular we basically  send the event data from template and retrieve it in component property. 

        So we can send the data from template as a event object or by template reference variable. But most of the time we  need very less data from an control event but we send the  complete event object to back end. Lets discuss it by taking a small example

@ @ComponentCom({ selector: 'app-Keyup', template: ` <input (keyup)="onKey($event)"> <p>{{values}}</p> ` }) export class KeyUpComponent { values = ''; onKey(event: any) { this.values += event.target.value + ' | '; } }
So in this above example to get the value of the Input field we are sending the event object which is not needed As because If we really work on a big project unnecessarily it will create more overload.  So how to handle this situation by template reference variable.  Lets take an example here.

@Component({ selector: 'app-keyBy-treference', template: ` <input #template (keyup)="onKey(template.value)"> <p>{{values}}</p> ` }) export class KeyUpComponent { values = ''; onKey(value: string) { this.values += value; } }

See in this example how we send the data from template to component object . 
So we have lots of example . We will discuss in later blog.
Keep enjoying .

Please like this article if this help you . Thanks for reading .