Do you feel insecure, anxious and doubtful about ViewChild,View Children,ContentChild and ContentChildren decorators in Angular? No worries!!! I hope you will get clarity simply by reading this Blog.
Essentially, ViewChild, ViewChildren, ContentChild, and ContentChildren, are used for component communication in Angular. Therefore, if a parent component wants access to the child component then it uses these decorators.
@ViewChild()
If you want to access the following inside the parent component, use @ViewChild() decorator of Angular.
- DOM Element
- Directive
- Child Component
1. @ViewChild using DOM Element
First create a component and In this component HTML add Template reference variable like <input #TemplateName> .Then in the controller file import dependencies @ViewChild(),ElementRef,AfterViewInit. Create an instance of this Template variable.Pass the template variable name in string as an argument to the @ViewChild() like below mentioned.
Here childElement is the template variable and in the controller file we are changing the color of the DOM element.
2. @ViewChild() using Directive:-
In this method, first, we need to create one directive.
In this directive, we need to import dependencies like ElementRef and AfterViewInit and create one method in this directive that changes the color of the text.
Pass the directive selector into the parent component like this, Here appDemo is the directive name.
HTML:
Ts:
- In the parent component controller file, we need to import @ViewChild decorator and pass the directive name as an argument to the @ViewChild() and then access the method which we created in the directive. In parent HTML we need to pass the directive selector as an attribute.
- Here demoDirective is an instance of DemoDirective and we are passing text color through changeDirectivedColor() method.
3. @ViewChild() using Child Component:
Create parent and child component in the below-mentioned format.
Parent component:
Child component:
Create methods for increment and decrement in the child component to call in the parent component.
Import the child component and pass the child component class name as an argument to the @ViewChild decorator and Call child component methods into parent component as mentioned in below.
HTML:
TS:
@ViewChildren()
- If the parent component has more than one same child component then we are using @ViewChildren decorator.Use to get the QueryList of child Component from the view DOM.
- Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value.View queries are set before the ngAfterViewInit callback is called.
Parent component:
HTML: In parent component two same child components are there.If we need to access both we need to use @ViewChildren decorator.
TS:
To access both child components in the parent component We need to convert the childComponent instance as an array like below mentioned this.childComponent.toArrary() Otherwise it will always trigger the first child component.
@ContentChild():
Use to get the first element or the directive matching the selector from the content DOM. If the content DOM changes, and a new child matches the selector, the property will be updated.
Content queries are set before the ngAfterContentInit callback is called.
Does not retrieve elements or directives that are in other components’ templates, since a component’s template is always a black box to its ancestors.
We are creating student details by using child components and we are accessing or updating child component content using @ContentChild() decorator,@ContentChild always triggers first child component content.If we need to add content inside any component we need to use <ng-content> element.
Parent component:
HTML:
TS:
Child component:
HTML:
TS:
Sub child component:
HTML:
TS:
@ContentChildren():-
- To access or update all child components content we are using @ContentChildren decorator.
- Use to get the QueryList of elements or directives from the content DOM. Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value.
- Content queries are set before the ngAfterContentInit callback is called.
- Does not retrieve elements or directives that are in other components’ templates, since a component’s template is always a black box to its ancestors.
Just we need to change the child component like this importing @ContentChildrent,QueryList.
Child component:
TS:
Well,
In this blog, we discussed @ViewChild,@ViewChildren,@ContentChild, and @ContentChildren decorators in Angular. These are excellent utilities for querying child elements in views. For a parent to child component communication, these are very useful and interesting decorators. Still, if you have any questions please feel free to ask questions in the comment box and I will write another blog answering those. Thank you!!!
Author
