Scribd
Upload
22 views5 pages

View Children in Angular

Uploaded by

Sunita yadav
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views5 pages

View Children in Angular

Uploaded by

Sunita yadav
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 5

VIEW CHILDREN IN ANGULAR

RajShekhar
Overview:
In Angular, components often need to interact with elements or
components within their template.
Angular provides several mechanisms to query and access
WHAT IS VIEW CHILDREN these elements. One such mechanism is @ViewChildren
IN ANGULAR? GIVE
SHORT
DETAILS AND EXAMPLE
Purpose:
@ViewChildren decorator is used to query for elements,
directives, or components from the view DOM
within an Angular component. It allows a component to
interact with multiple child elements or components.
Usage:
Syntax: 1.Import Statement:
Typescript You need to import ViewChildren from @angular/core to use it

2.Decorate Property:
•Selector: The CSS selector, directive, Decorate a property of your component with @ViewChildren
followed by the selector, directive, or component type you wantto query for.
or component type to query for.

•PropertyName: The name of the


property that will hold the query result.
3.Accessing Elements:
After the view has been initialized (ngAfterViewInit lifecycle hook), you can
•QueryList: A collection of items that access the queried elements through the property. The result is stored in a
Angular keeps up to date when the QueryList, which is an iterable collection.
state of the application changes.
Example:
Let's say you have a component with a template containing multiple child
elements:
In this example, @ViewChildren('item')
items:

QueryList<ElementRef>; queries for all


elements with the #item template In the component class, you can use @ViewChildren to query for these
reference variable. elements:

Later, in ngAfterViewInit(),
you can access these elements
through the items property and perform
operations on them.
THANK YOU

You might also like