Video Tutorials

Policy

Twitter LogoFacebook Logo
Template Reference
Pass a reference to a DOM element into Typescript
By: King

Template reference is one of the most powerful features of Angular. It allows us to quickly add a reference to elements and components in our HTML pages so we can have direct access its properties and methods. 

Normally to achieve this, we would give an element an id and then call the getElementById() function to get the reference of the element. Then we can access it’s properties. 

<button id="clickMeExample"></button>

let clickMeExample = document.getElementById("clickMeExample");

clickMeExample.onClick = () => { ... }

With template reference, we can skip this step with a simple syntax. To begin, we have a robot component. 

In the Robot component TypeScript file is a name property for the name of the robot and a method call speak, that displays an alert() in the browser.

name = "Robot 100";


speak(message: string) {
   alert(message);
}

In the Robot component html page, we displayed the name of the robot.

{{ name }}

And in the app component html page, there is the robot component and an empty button. 

<app-robot></app-robot>


<button>Push Me!</button>

Now, Let’s say that we want to call the speak method in the robot component every time we click on this button. Here is how we will do it with template reference.


To get the reference using the template reference technique, we place a hash symbol in the element and then give it a name to be referenced by.

<app-robot #robot></app-robot>

That’s it, we now have a reference to this robot component.

And here is the cool part. We can attach a click event to our button and call the speak method directly by accessing the template reference variable and using the dot operator to get the speak method.

<button (click)="robot.speak('Hello, I am a Robot.')">Push Me!</button>

So now, when we click on the button, it will display “Hello, I am a Robot.” in the browser. Let’s verify that. 


Save the project and start the local server. Go to the browser and go to localhost: 4200. Then click on the button.

Image from Codeible.com

As you can see, by using the template reference technique, we can quickly get a reference to an element or component and have direct access to all of its public properties and methods.


Let’s do another example. This time let’s modify the button to change the name of our robot. Go back to VS code.

Go to the app component html page. Instead of calling the speak method from our robot component, we will assign another function for it to call. Then we will pass in the reference of the robot as an argument.

<button (click)="onClick(robot)">Push Me!</button>

Go to the app component TypeScript file and define the function. For the parameter, it will be the robot component. In the body of the function, we will get the robot reference and then access the name property. Then we will assign it a new value.

onClick(robot: RobotComponent){

   robot.name = "Robot 100";
}

So now, when we click on the button, it will change the name of the robot from Robot 001 to Robot 100. Let’s verify that. Save the project and go to the browser. Click on the button.

Robot 100

As you can see, the name of the robot changed from Robot 001 to Robot 100. 

Recap

Let’s take a moment to recap what we have learned.


We learned that if we want to reference an element or component with the template reference technique, we place the hash symbol inside the element or component and give it a name to be referenced by.

We also learned that template reference allows us to reference elements and components in the DOM and have directly access to all of its public properties and methods.


Sign In