Angular ViewChild and ViewChildren

Working with ViewChild and ViewChildren

TechnoFunnel Presents another article on understanding the usage of @ViewChild and @ViewChildren inside Angular components. We will look at how to effectively use these functionalities to achieve your desired results. A component can obtain a reference to an element or directive so we can access it directly. The directive can be either Angular’s own or a user-defined custom directive. We can sometimes require access to the element or component directly and manipulate the properties of the component or element. This is somehow the same as getting a DOM element using JavaScript and updating the property and behavior of the DOM element.

Working With Angular’s ViewChild

@ViewChild can be used to get the reference of the DOM element rendered inside an Angular component. We can use the reference of the DOM element to manipulate element properties. To get the component, we need to specify the selector. Given above is the code to access the DOM element using either plain JavaScript or Angular’s @ViewChild. Using JavaScript, we can use a selector to extract the component. Given our statement below, we are trying to access the element using an element ID. <div id=”someElement”>Sample Code</div> Given below is a div element having a template reference marked as someElement. Template references start with #. In the case of Angular, we can access the elements using these template references. The element reference can be retrieved by using @ViewChild and the template-reference variable specified for the same. Let’s look at this in action. <div #someElement>Sample Code</div>

When Can We Refer to This ViewChild Variable?

The reference to a @ViewChild variable is assigned once the View has been initialized. Angular provides a life-cycle Hook called ngAfterViewInit, which is called once the View has been initialized. Once the View is initialized and rendered, the @ViewChild can then access the element using the template reference. It provides us with access to the element/directive. Let’s look at the code: In the code above, the following points need to be considered:

• We can access the input element having the template-reference variable “someElement” using @ViewChild.
• The ViewChild element domReference will receive access to the DOM element only after it has been rendered. Once the component is rendered, a life-cycle event called ngAfterViewInit is invoked. So we can refer to the element in this life-cycle event or in later life-cycle events.
• @ViewChild can enable the user to access the native DOM element of the View rendered. Using this DOM reference, we can access and modify DOM properties like manipulating style, innerText, value, and other properties related to an element referred.
• We are directly accessing the DOM, so we are tightly coupled with the browser. So we may not be able to use these references using server-side rendering, and it also may pose security threats.

Accessing Element Using Angular Directive

We can use Angular directives like NgModel with @ViewChild. Let’s look for the requirement and use case scenarios for accessing Angular directives using @ViewChild. We can access the NgModel directive inside @ViewChild and subscribe to value changes. Given above is the code, where we are trying to access an element using the Angular Directive NgModel. Element with the ID userName is having the directive NgModel added to it. Using @ViewChild, we will track changes to any value update inside the input element. We get the reference to the input element’s NgModel data structure, and using reference, we can access its state information, like whether it has been modified or if the value is valid or not. It can be accessed inside the ngAfterViewInit life cycle. We get access to all the state information. It also provides information about any updates to the property. This reference is read-only. It gives us access to observable, and we can use this observable to subscribe to the valueChanges observable. Whenever the value is updated, a callback function associated with it is triggered, and we can add custom logic in response to the update.

Working With Angular’s ViewChildren

Working with @ViewChildren is similar to @ViewChild, but the difference between the two is @ViewChildren provides a list of element references rather than returning a single reference. It is used to reference multiple elements. We can then iterate the list of the element referenced by the variable. The following selectors can be used with @ViewChildren:

1. We can use ViewChildren with Angular directives like NgModel

We can use inbuilt directives like NgModel with ViewChild. It will give the list of all the elements having the directive NgModel attached to it. Given above is the code, which extracts the element using the Angular directive NgModel. All the components containing the specified Angular directive can be retrieved and further evaluated.

2. Accessing elements using child components

Similar to the usage of directives with @ViewChild, we can use the child component name to access the elements using @ViewChildren. This just necessitates that we have some child component (e.g., user-details) inside our main component. Let’s see the following scenario with an example. The code above gets the list of all the child-component references contained inside a parent component. We can then use these references to accomplish custom logic. The developer can then use this list to accomplish further tasks.

3. Using template-reference variables

Multiple components inside the element can contain the same template reference. If we use a template reference in multiple places, we receive the reference list of all components referred by the same template-reference variable in the template. The code above contains multiple components with the same template-reference variable. @ViewChildren will enable the user to access all the components that refer to the template reference applicationInfo.

4. Accessing multiple template-reference variables

The selector can be a set of template references. We can specify multiple template references. All the components containing the template reference specified in the list are retrieved from the component. In the code above, we are adding the list of template-reference variables inside @ViewChild. All the components containing the element reference contained in the list are retrieved and can be accessed with the variable name.

Working with ViewChild and Child Components

ViewChild and ViewChildren can be used to access the properties and methods of the child component. Using @ViewChildren and @ViewChild, we can get the reference of the child component, which further gives access to all the properties and methods. This can enable a parent component to access the child component and enable communication between them. Let’s look at the code to understand the concept better: The code above contains a simple child component, which has the property userName and the function updateUserName, prescribed to update the userName property of the component. Now let’s add a new component that will act as a parent component for the above ChildComponent. We will look into the code to access the child component’s properties and methods from the parent component using @ViewChild. Let’s look at the code below. The above code represents a parent component. In the template specified for the parent component, we have a child component added. The child component is marked with a template-reference variable. We can use this template reference to access the properties and variables of the child component. @ViewChild(“userInformation”) childComponentReference: any; @ViewChild can be used to access the child component having the template reference userInformation, which represents the child component. Using this childComponentReference, we can further access the properties and call the function of the child component, as specified above.

Conclusion

I hope the article was informative for you. Feel free to leave a comment below.