How to access DOM element in Angular
Posted By : Ekta Bhadauriya | 19-Jan-2021
@ViewChild and @ViewChildren
To access and manipulate DOM elements, directives, and components in Angular, we have the @ViewChild and the @ViewChildren decorators.
ViewChild is used to query one element from the DOM whereas for multiple elements we use ViewChildren.
The property decorator configures a view query while to look for the element or directive which matches first in the selector in the view DOM, we have the Change Detector. The property gets updated when the view DOM changes and the new child matches the selector.
Also Read: Overview Of Angular version 10
The decorator takes the following information:
selector - The selector of the element to query can be a directive type or a name.
read - Read a different token from queried elements.
static - To indicate whether or not to resolve query results before change detection runs., we have static. It is a new thing in Angular 8.
ViewChild can take the following selectors:
Classes with @Component or @Directive decorators that is components and directives,
Template reference variables,
Providers,
TemplateRef
For eg, AppComponent needs a reference of the <app-color-sample> component which AppComponent uses inside its template, in order to call a method directly on it.
First, we imported ViewChild and AfterViewInit from the @angular/corepackage:
then, create a query called primarySampleComponent that takes ColorSampleComponent as the selector and has static equals to false:
The value of the injected member variable is not immediately available at component construction time!
Angular will fill in this property after the view initialization is completed automatically.
Also Read: Angular Components And Their Working Methodologies
The AfterViewInit Lifecycle Hook
If there is a need to write initialization code of the component which uses the references injected by @ViewChild, do it inside the AfterViewInit lifecycle hook.
selector: 'app-root',
templateUrl: './app.component.html'
})
.....
@ViewChild(ColorSampleComponent) primarySampleComponent: ColorSampleComponent;
ngAfterViewInit() {
console.log("primaryColorSample:", this.primarySampleComponent);
}
......
}
Turn To Our SaaS App Development Services
We are a 360-degree software development company that provides cross-platform SaaS app development services to address varied software project requirements. We have an experienced team of Java, PHP, and Python developers who use advanced frameworks, tools, and SDKs to build scalable web and mobile applications with custom features. For more detail, reach us out at [email protected].
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Ekta Bhadauriya
Ekta stands out as a highly accomplished Frontend Developer, specializing in Angular technology. In addition to her mastery of Angular, she possesses a comprehensive understanding of various programming languages and tools, including HTML, CSS, JavaScript, AMP, and Git. Ekta has made significant and noteworthy contributions to several internal projects, such as the Oodles Dashboard, Careers Frontend, and Oodles.com. Her expertise and skills have played a pivotal role in the success of these projects.