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.

using httpClient with "text" as content type to fetch the file and use [innerHTML] into your page ? — Gilsdav
– Gilsdav, Commented Sep 4, 2019 at 22:23
Thank you @Gilsdav , your comment with the answer below worked great — lanierhall
– lanierhall, Commented Sep 4, 2019 at 23:49

Joy Biswas · Accepted Answer · 2019-09-04 22:48:40Z

12

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

answered Sep 4, 2019 at 22:48

Joy Biswas

6,5531 gold badge27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lanierhall Over a year ago

I used const headers = new HttpHeaders().set('Content-Type', 'text/html'); HttpClient.get(url, {headers, responseType: 'text'} instead of fetch But that worked, thank you very much

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related