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)
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);
}
}
If you can generate PDF on client side, I would suggest to use a CSS media query: @media print { ... }
The main reason is that DOM doesn't reflect "application" state. Only re-rendering exported DOM isn't compliant. More your component CSS won't be enough to reproduce all styles (agent, page, component imbrication, and so on).
Most tool that have server-side web-based rendering (PDF, images, ...) are using PhantomJS to generate a "snapshot".
In the case of Angular, you can also take a look at Angular Universal that offer server-side rendering.
Use document.documentElement.innerHTML get the the whole DOM with inline css and save.