'Downloading the HTML and CSS of Angular Template Reference

Is there a way that I can get a downloadable HTML file (w/ stylings) from a template reference in Angular? I think I saw there were ways I can get this to be as a PDF and image, but I need the raw HTML.

Right now I have the following:

example-component.html

[...]
<div #previewExample class="preview-wireframe">
    <div class="preview-frame" [ngStyle]="{'width':device === 'mobile' ? '200px' : '500px'}">
        <ng-template [ngTemplateOutlet]="innerTemplate"></ng-template>
        <div class="preview">
            <img [src]="imageToShow"
                class="preview-image"
                alt="Place image title"
                *ngIf="imageToShow && !isImageLoading; else noImageFound">
        </div>
        <ng-template [ngTemplateOutlet]="innerTemplate"></ng-template>
    </div>
</div>
[...]

example-component.ts

@Component({
    selector: 'preview',
    templateUrl: './example-component.html',
    styleUrls: ['./example-component.css'],
})

@ViewChild('previewExample', { static: true }) public previewExample: ElementRef;

downloadRef() {
    // How do I also load this elementRef w/ stylings as well?
    this.previewExample.nativeElement.innerHTML
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source