How do load an HTML file in the template of a component in Angular?

Question

I am working on a site to demonstrate some of the side projects I've been working on. I've created a 'Project' component that has a title, list of technologies used and a url to a repository. I want to also be able to add a path to a basic html file that just has some text and headers that explains the project. I cannot figure out how to do this... do i need to create a separate component for each project?

The template currently looks something like this:

<a [href]="repositoryURL"><fa size="2x" name="github"></fa></a>
<h3 id="project-header">{{ title }}</h3>
<p>
  Technologies Used: {{ getTechnologiesList() }}
</p>
<div id="project-description">
  <!-- Here I want to include a description of the project with
     different paragraph and header elements, maybe some images  -->
</div>

---

Edit:

My solution was to store the HTML files in the src/assets folder, and access them using Http get request. I then stored the HTML as a string and set the [innerHTML] of the div element as the answer suggests.

This is what the Http request looks like:

descriptionPath : string = "multiquadris.htm";
projectDescription : string = "";

constructor(private http: HttpClient)
{
    this.http
        .get('assets/project-descriptions' + this.descriptionPath,
             { responseType: 'text' })
        .subscribe(data => {
            this.projectDescription = data;
        }
    );
}

And the template file:

<a [href]="repositoryURL"><fa size="2x" name="github"></fa></a>
<h3 id="project-header">{{ title }}</h3>
<p>
  Technologies Used: {{ getTechnologiesList() }}
</p>
<div [innerHTML]="projectDescription"></div>

Answer 1

What you are looking out for is [innerHtml].You would need with something like this

<a [href]="repositoryURL"><fa size="2x" name="github"></fa></a>
<h3 id="project-header">{{ title }}</h3>
<p>
  Technologies Used: {{ getTechnologiesList() }}
</p>
<div id="project-description">
 <div [innerHtml]="yourHTML">
</div>