How to access DOM element in Angular

@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.

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].