Angular 10 Tutorial - Template Reference Variables

In this video we are going to learn about Template Reference Variables.
Angular provides us, a way of capturing a reference to any specific dom element, component or directive.
In order to use it somewhere in our template itself.
Lets see how can we use Template Reference Variable in angular 10.
So switch to the project.
Now lets open app.component.html and here lets add a input text field.


Enter Name : <input type=\"text\" />

Now add the identifier to text field.
The identifier name used for the template reference variable should be unique and should not conflict with any other template reference variable.
So just add her the reference variable.
For adding reference variable we use # sign.
So just write here #name.


Enter Name : <input type=\"text\" #name />

Now access the text value using reference variable.
So here just create a function and call from button.


<button (click)=\"showName(name.target.value)\" >Show</button>

Now lets create this function so go to the app.component.ts file and here just add the function.


name = ''; 
showName(name) 
{ 
    this.name = name; 
}

Now just just display the name in app.component.html file.


{{name}}

Now lets check it.
So switch to the browser and enter any name.
Now click on show.
You can see here the name.
Lets use reference variable with p tag.
Just add the p tag and write some text inside this.