javascripthtmlangularangularjs-directive

How to get the full HTML and CSS (computed styles) of a component in Angular with ViewChild?

I have a component in Angular, and I need to extract the full HTML content along with the computed CSS styles of a specific element using ViewChild. I'm currently able to get the HTML content using:

@ViewChild('mySelector', { static: false }) mySelector!: ElementRef;
const htmlContent = this.mySelector?.nativeElement?.innerHTML;

the html code is missing some css styles

link here is the link to stackblitz

Solution

  • I think your issue might be a timing one with the lifecycle. You were using a ngOnInit, however the view has not loaded at this point in the lifecycle. Im not sure what it is you are looking for, so its hard to verify, but ngAfterViewInit might be what you need.

    stackblitz