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

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);
  })
}