How to read an HTML file into an angular component so as to allow for the updating of the HTML file without redeploying code

Question

I am trying to have a HTML file in my assets folder that is nothing but some header tags, dates and feature lists to serve as release notes for our website. I have an angular modal component that I want to read this file each time its route is called, rather than the alternative of having the HTML in the component itself which would require us to redeploy anytime we updated the release notes.

As mentioned I originally had this as part of my components HTML file but this was then being compiled into javascript each time and unable to be updated without a redeploy. Everything I have tried to search for doing something similar seems to be pointing me to just doing it that way.

ReleaseNotes.html
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<body>
  <h1>Example header one</h1>
  <h3>03/01/2019</h3>
  <h4>Patch 1.03 Title</h4>
  <ul>
    <li>Feature that was added</li>
    <li>Feature that was added</li>
    <li>Feature that was added</li>
  </ul>
  <hr>

release-notes-modal.component.ts
export class ReleaseNotesModalComponent implements OnInit {

  faTimesCircle = faTimesCircle;

  contents: string;

  constructor(public dialogRef: MatDialogRef<ReleaseNotesModalComponent>) {
    //this.contents = System.IO.File.ReadAllText("ReleaseNotes.html");
  }

  ngOnInit() {
  }

  close() {
    this.dialogRef.close();
  }
}

[this](https://stackoverflow.com/questions/48028676/compile-dynamic-html-in-angular-4-5-something-similar-to-compile-in-angular-js) might be helpful. — ysf, Jun 27 '19 at 09:14

peinearydevelopment · Answer 1 · 2019-06-28T13:59:33.180

There are a few ways you can accomplish this. This is how I've done this in the past.

In a Controller in the c# application, you would read the html file and return it:

[HttpGet]
[Route("releasenotes")]
public async Task<IActionResult> ReadReleaseNotes()
{
    var viewPath = Path.GetFullPath(Path.Combine(HostingEnvironment.WebRootPath, $@"..\Views\Home\releasenotes.html"));
    var viewContents = await System.IO.File.ReadAllTextAsync(viewPath).ConfigureAwait(false);
    return Content(viewContents, "text/html");
}

Then in the angular application in a service you would call this method and retrieve this file as follows:

getReleaseNotes(): Observable<string> {
    return this.http
               .get([INSERT_BASE_URL_HERE] + '/releasenotes', { responseType: 'text' });
}

You can then utilize that in the ReleaseNotesModalComponent through something like this:

@Component({
  template: '<span [innerHTML]="contents"></span>'
})
export class ReleaseNotesModalComponent implements OnInit {

  faTimesCircle = faTimesCircle;

  contents: string;

  constructor(public dialogRef: MatDialogRef<ReleaseNotesModalComponent>, private service: ReleaseNotesService) {
    service.getReleaseNotes(html => this.contents = html);
  }

  ngOnInit() {
  }

  close() {
    this.dialogRef.close();
  }
}

For the Angular side of things, I created a StackBlitz example.

How to read an HTML file into an angular component so as to allow for the updating of the HTML file without redeploying code

1 Answers1