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

Question

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

could you replicate your issue on a stackblitz and update on the question — Naren Murali, Commented Nov 6, 2024 at 12:43
@NarenMurali on a stackblitz?? No, here on Stack Overflow, which has facilities to do the same thing. — Pointy, Commented Nov 6, 2024 at 12:54
@Pointy SO editor does not provide the facility to create working angular code — Naren Murali, Commented Nov 6, 2024 at 12:54
Fair point, though I don't think this has much to do with Angular specifically; the OP is going to have to create (or find) a tool to perform .getComputedStyle() on each element of a DOM subtree. — Pointy, Commented Nov 6, 2024 at 12:56

CouchCode · Accepted Answer · 2024-11-09 06:40:56Z

1

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

edited Nov 9, 2024 at 6:40

answered Nov 8, 2024 at 21:55

CouchCode

3051 silver badge8 bronze badges

Add a comment |

Collectives™ on Stack Overflow

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

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related