Angular – ViewChild and TemplateReference Variable

Introduction

In earlier post, we saw how to communicate in and out of components using input/output properties.

In this post we’ll explore another way to access the public properties and methods of a child components. This could be useful for different use cases.

We’ll learn about using Template Reference Variable and/or @ViewChild() decorator.

ViewChild/ViewChildren Selector

A component, can obtain a reference to an element or directive on its template and access it directly.

We can use ViewChild/ViewChildren directives to communicate b/w component and its template.

Selector can be

• Element e.g. Template Reference variable / ElementRef
• NgModel
• Custom-directive/child component

ElementRef

Following example shows how to get reference to div element using ViewChild decorator. Notice that the div is referenced using #divElementRef variable and it is used as a selector for ViewChild decorator.

NgModel

In the following example ViewChild is used with NgModel

Custom-Directive/Child component

The following is the example of referencing a custom directive using ViewChild

Once we have the reference, we can use it as per the requirements.

ViewChild and NativeDomElement

The following example shows that once we have hold of the reference, we can call use nativeElement for calling methods or in case of template, its methods or properties can be accessed.

Lets see few more examples next.

Template Reference Variables

Template Reference Variables allows us to specify a local variable name, that points to a component, and then we can access any public properties or methods on that component using that variable. So its a pointer to element/component.

The following is a simple component with a title property and hello() method:

we can use this as a child in another component as follows

#child is the template reference variable name, we gave to this component.

Now, we are able to reference this variable in our template. Following example shows how to call method on child from parent using template reference variable:

Lets see that we can also use it to bind child property with parent

and following is the result

The use of Template Reference Variable is straight forward and sometimes it can be simpler than use of @Input/@Output parameters.

Using @ViewChild Decorator

Another way, we can access the child component is by using of @ViewChild decorator.

so, in the parent component, we can define the ViewChild variable which points to the same local variable (#child) from previous example.

We can now use this variable to access methods on the child from parent.

Summary

In this post, we learn another way to communicate with child components by use of template reference variable and @ViewChild decorator.

These approaches can be sometimes simpler than use of @Input/@Output way of components communication.

You can download the source code from this git repository.

The deployed sample application is available on this URL.

Let me know if you have some questions and/or comments. Till next time, Happy Coding!