TL;DR
Get the rendered element with viewChild, wait for after rendering, then call SnapDOM.
Install and use SnapDOM in Angular
import { Component, ElementRef, viewChild } from '@angular/core'
import { snapdom } from '@zumer/snapdom'
@Component({
template: '<article #card>Your component</article><button (click)="save()">Download</button>',
})
export class CardComponent {
card = viewChild.required<ElementRef<HTMLElement>>('card')
async save() {
await snapdom.download(this.card().nativeElement, { format: 'png' })
}
}Lifecycle and fidelity
SnapDOM captures the DOM Angular has already rendered. Keep the capture attached to the component instance, wait for updates to settle, and use embedFonts: true when the output must travel independently.
Browser-only boundary
Run capture from client-side interaction. SnapDOM needs layout, computed styles, SVG and Canvas APIs, so it does not execute during server rendering.
Frequently asked questions
Does SnapDOM have a Angular-specific package?
No. SnapDOM captures the browser DOM, so the same @zumer/snapdom package works across frameworks.
When should capture run in Angular?
Run it in the browser after after rendering and after important fonts, images and asynchronous data are ready.
Capture it in the browser
Install SnapDOM and turn the DOM your users already see into a portable image.
Open the demoInstall from npm