@ViewChild and @ViewChildren in Angular

Deepak Pandey
Sep 28 · 2 min read

The @ViewChild and @ViewChildren are the property decorators that configures a view query. In both cases, the view queries are set before the ngAfterViewInit callback is called.

@ViewChild provides access to the first element or the directive matching the selector in the view DOM. This decorator can take three metadata properties mentioned below:

selector — The directive type or the name used for querying.

read — True to read a different token from the queried elements.

static — True to resolve query results before change detection runs

@ViewChildren provide the QueryList of elements or directives from the view DOM. @ViewChildren can only take the first two metadata properties i.e. selector and read.

In the below code images we are accessing the child component/element from the parent component using the two decorator properties.

child.component.ts
app.component.ts with @ViewChild example
app.component.ts with @ViewChildren example

That’s it and we are done!!! :)

JavaScript in Plain English

Learn the web's most important programming language.

Deepak Pandey

Written by

Angular | Angular JS | JavaScript | Python | Java

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade