title: Angular 7+: Inject static html file into middle of component view
body: <p>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</p>
  
  <pre><code>&lt;h1 md-dialog-title&gt;Sign EULA&lt;/h1&gt;
  &lt;mat-dialog-content&gt;
  
    &lt;!-- HOW TO INJECT A FILE HERE --&gt;
    &lt;div&gt; REPLACE ME WITH CONTENTS OF FILE&lt;/div&gt;
  
  
  &lt;/mat-dialog-content&gt;
  &lt;mat-dialog-actions&gt;
    &lt;mat-checkbox [(ngModel)]="agreeCheckbox"&gt;I have read and agree to the eula&lt;/mat-checkbox&gt;
    &lt;button md-raised-button color="primary" mat-dialog-close [disabled]="!agreeCheckbox"&gt;
      I Agree
    &lt;/button&gt;
  &lt;/mat-dialog-actions&gt;
  </code></pre>
  
  <p>I have a folder structure that looks like this:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>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>
  
  <pre><code>&lt;p&gt;Title&lt;/p&gt;
  &lt;div&gt; LOTS OF TEXT &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>