Is there a simple and effective way to locate child nodes within an iframe using Angular in order to access the HTML element? Currently, I have implemented the following method:
I designated a reference variable within my iframe (#privacyPolicy)
<iframe
name="privacy-policy"
id="privacy-policy"
[src]="myURL"
#privacyPolicy>
</iframe>
In my Component, I utilized @ViewChild to obtain access to my iframe
export class MyClass implements AfterViewInit {
@ViewChild('privacyPolicy', { static: false }) privacyPolicy: ElementRef<any>;
ngAfterViewInit() {
const hostElement = this.privacyPolicy.nativeElement;
console.log(hostElement.children);
console.log(hostElement.parentNode);
console.log('iframe', this.privacyPolicy.nativeElement.style.border = '1px solid black');
}
}
The third console.log() within the ngAfterViewInit() lifecycle function successfully styles the iframe element. However, I am seeking to style the html element nested within the iframe element.
I attempted the following approach without success:
hostElement.children[0].style.border = "1px solid black";
Are there any straightforward and efficient Angular methods to accomplish this task?