I'm struggling to get a reference of child elements within a component. I have experimented with ElementRef, TemplateRef, QueryList, ViewChild, ViewChildren, ContentChild, and ContentChildren without success.
<app-modal>
<section #reference>
<h1>I NEED THIS ELEMENT</h1>
</section>
</app-modal>
I need the complete reference of the section element along with its children as HTML elements.
@ViewChild('reference') ref: ElementRef;
ngAfterViewInit(): void {
console.log(this.ref.nativeElement); -----> TypeError: Cannot read properties of undefined (reading 'nativeElement')
}
ngAfterContentInit(){
console.log(this.ref.nativeElement); -----> TypeError: Cannot read properties of undefined (reading 'nativeElement')
}
This way, I can pass the same reference to another component and display it as innerHTML in dev.
<div innerHTML='ref'></div>
Your prompt assistance is greatly appreciated.