Angular 7+: Inject static html file into middle of component view - html

Question

I'm having trouble finding the best way to inject static html from a file into the middle of my view. I have a component called eula-dialog in which the component doesn't do anything yet but the view looks like this:
eula-dialog.component.html
<h1 md-dialog-title>Sign EULA</h1>
<mat-dialog-content>
<!-- HOW TO INJECT A FILE HERE -->
<div> REPLACE ME WITH CONTENTS OF FILE</div>
</mat-dialog-content>
<mat-dialog-actions>
<mat-checkbox [(ngModel)]="agreeCheckbox">I have read and agree to the eula</mat-checkbox>
<button md-raised-button color="primary" mat-dialog-close [disabled]="!agreeCheckbox">
I Agree
</button>
</mat-dialog-actions>
I have a folder structure that looks like this:
eula-dialog
eula-dialog.component.html
eula-dialog.component.scss
eula-dialog.component.spec.ts
eula-dialog.component.ts
very-long-readonly-eula-template.html
I can't modify the contents of the eula HTML, which has mostly text and some html elements but is not a complete page, it looks like this:
<p>Title</p>
<div> LOTS OF TEXT </div>
What's the best way to do this?
Also it would be best that this eula html file/template doesn't load with the app all the time but only gets sent to the client when needed.

Answer 1

Put static files in assets folder else tell angular to mark it as asset in angular.json.
Then use
<h1 md-dialog-title>Sign EULA</h1>
<mat-dialog-content>
<!-- HOW TO INJECT A FILE HERE -->
<div [innerHTML]="eulaContent">...</div>
</mat-dialog-content>
<mat-dialog-actions>
<mat-checkbox [(ngModel)]="agreeCheckbox">I have read and agree to the eula</mat-checkbox>
<button md-raised-button color="primary" mat-dialog-close [disabled]="!agreeCheckbox">
I Agree
</button>
</mat-dialog-actions>
// In .ts file
import { DomSanitizer} from '#angular/platform-browser';
eulaContent = '';
constructor(private sanitizer: DomSanitizer)
ngOnInit(){
fetch('/assets/yourlocation.html').then(res => res.text()).then(data => {
this.eulaContent = this.sanitizer.bypassSecurityTrustHtml(data);
})
}