Angular 2+: Get child element of @ViewChild()

Question

How can I access the child elements (here: ) of @ViewChild() in Angular 2+ without explicit declaration?

In template.htm

Answer 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;

public getChildren() {
  const parentElement = this.parentRef.nativeElement;
  const firstChild = parentElement.children[0];
  const firstImage = parentElement.querySelector("img");
  ...
}

See this stackblitz for a demo.