Angular 2+: Get child element of @ViewChild()
43,832
Solution 1
You can use the nativeElement
property of the ElementRef
given by ViewChild
to get the corresponding HTML element. From there, standard DOM methods and properties give access to its children:
- element.children
- element.querySelector
- element.querySelectorAll
- etc.
For example:
@ViewChild("parent") private parentRef: ElementRef<HTMLElement>;
public getChildren() {
const parentElement = this.parentRef.nativeElement;
const firstChild = parentElement.children[0];
const firstImage = parentElement.querySelector("img");
...
}
See this stackblitz for a demo.
Solution 2
use ViewChildren
instead which gets all elements with same tag.
@ViewChildren('parent') parents: QueryList<any>;
To convert those elements to array:
const arr = this.parent.toArray();
Choose first element:
const el = arr[0]
Access child html of first element: const innerHtml = el.nativeElement.innerHtml;
Related videos on Youtube
Author by
btx
Updated on January 19, 2022Comments
-
btx over 2 years
How can I access the child elements (here:
<img>
) of@ViewChild()
in Angular 2+ without explicit declaration?In template.html
<div #parent> <!-- There can be anything than <img> --> <img src="http://localhost/123.jpg" alt=""> </div>
In component.ts
@ViewChild('parent') parent; public getFirstChild() { this.firstChild = this.parent.? // }
The aim is, to be able to create a universal component that uses:
<div #parent> <ng-content></ng-content> </div>
So the child elements of
#parent
need to be accessible without explicit declaration. -
btx almost 6 yearsBut this doesn't access the <img>, does it? I need to access the child of #parent
-
Vugar Abdullayev almost 6 yearsWhy you do not access img directly instead of through parent. If you have strong reason for than then you can use innerHtml to access child. const el = arr[0].nativeElement.innerHtml
-
btx almost 6 yearsAs I mentioned, the parent has dynamic content. So I don't want to have an explicit accessor for the content.
-
btx almost 6 yearsGreat, thanks! Might there be an additional Angular way to access the child elements?
-
ConnorsFan almost 6 yearsThe "Angular way" would be with template reference variables, but I don't know if they can be used in transcluded content.
-
jpf over 3 yearsAwesome! This was the only thing I found to let me select a dynamically generated component of an unknown type injected in an ng-container with *ngComponentOutlet inside my parent component.