access html element of parent of parent of … the child component

Question

My code statement looks like this:

 this.elRef.nativeElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.scrollTo(0, 0);

How could I access an HTML element of an ancestor of the child component(my parent is at the top of the tree)?

I tried with suggested @Host method but seems like I'm getting the copy of Host component, not the parent root element.

Do we have a better syntax for the above statement?

Answer 1

in your html put #reference

<html-tag-element #yourParentEl></html-tag-element>

then in your component:

 @ViewChild('yourParentEl') parent: any; 

and you have in this.parent your element.