Get static html / css snapshot of component

Question

In short: How do I get the generated CSS of my component as a string?

-> I want to get a snapshot of my component. That is, what the very view looks looks like. Just what you see when you click right->inspect. Html & css to render the component independently from any Javascript.

Motivation: Use that snapshot for later export as PDF. I could create the PDFs server-wise, but since Angular has a neat templating engine, why not use it for that? Comments welcome.

I managed to get the snapshot html code from my banana-component like this:

// banana component file
@Component( { 
    selector: 'banana',
    template: `<div id="report">some text</div>`,
    styles: [ '#report { font-weight:bold; }' ]
})
export class BananaComponent {
    constructor(public elementRef: ElementRef) { }
}

// parent component file
@Component(...)
export class App {
    @ViewChild(BananaComponent) myBanana;
    private getSnapshot() {
         let bananaSnapshotHtml = this.myBanana.elementRef.nativeElement.outerHTML;
         let bananaSnapshotCss = // ?? TODO
    }
}

The snapshotHtml variable for example looks like this:

<banana _ngcontent-c2="" _nghost-c4="" ng-reflect-render="true"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div _ngcontent-c4="" id="report">
    some text
</div></banana>

But I have no idea how to get the respective bananaSnapshotCss. According to Firefox, Angular somehow puts this inline:

#report[_ngcontent-c4] {
  font-weight: bold; 
}

Is there a way to get this ^ somehow programmatically? I want my bananaSnapshotCss variable above to hold this exactly. Or is my entire approach wrong?

Right now, I am manually copying the contents of my css-files into bananaSnapshotCss and thus, it is part of my TS code. This is ugly and duplicate code and ignores nested child component styles.

See live sample here, including the current workaround (app/app.ts with a TODO)

Answer 1

You can apply the getComputedStyle() method to elementRef.nativeElement (read more about it here).

For your example this would mean:

// banana component file
@Component( { 
    selector: 'banana',
    template: `<div id="report">some text</div>`,
    styles: [ '#report { font-weight:bold; }' ]
})
export class BananaComponent {
    constructor(public elementRef: ElementRef) { }
}

// parent component file
@Component(...)
export class App {
    @ViewChild(BananaComponent) myBanana;
    private getSnapshot() {
         let bananaSnapshotHtml = this.myBanana.elementRef.nativeElement.outerHTML;
         let bananaSnapshotCss = getComputedStyle(this.myBanana.elementRef.nativeElement);
    }
}