Angular Component with multiple templates/HTML files

Question

EDIT: For anyone stumbling upon this later on, I ended up solving this issue using router-outlet. I found this YouTube tutorial pretty helpful.

I have a component Contents (<app-contents></app-contents) with dynamic contents, much like a blog would have the same basic layout, but a different mix of text/images/links/HTML for each page or post.

<div class="wrapper">
  <app-contents></app-contents>
</div>

Rather than generating a bunch of different components, I feel like this Contents component could maybe just use different HTML files or different templates. Ideally I could separate the templates into their own HTML files. The Contents component structure could be like this:

- contents
    - contents.component.css // <--- referenced by all contents templates
    - contents.component.html // <--- default template
    - lesson1.contents.component.html
    - lesson2.contents.component.html
    - lesson3.contents.component.html
    - lesson4.contents.component.html
    - lesson5.contents.component.html
    - contents.component.ts
    - contents.component.spec.ts

I want <app-contents></app-contents> to contain a default template with a series of links. Something like:

<ol>
  <li><a [routerLink]="['/lessons', 'lesson-1']">Lesson 1</a></li>
  <li><a [routerLink]="['/lessons', 'lesson-2']">Lesson 2</a></li>
  <li><a [routerLink]="['/lessons', 'lesson-3']">Lesson 3</a></li>
  <li><a [routerLink]="['/lessons', 'lesson-4']">Lesson 4</a></li>
  <li><a [routerLink]="['/lessons', 'lesson-5']">Lesson 5</a></li>
</ol>

Then, inapp.module.ts, I would have the route set up with the route parameter like so:

const appRoutes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full'},
  { path: 'lessons/:lesson', component: ContentsComponent},
];

At this point, I'm a bit lost on what to do. 1) Is there a better way to load in these different templates that are basically sharing component information (like styling, etc.) rather than the above method of having multiple HTML files inside a component?, and 2) where should I go from here for routing this path to its correct template? I have looked at documentation for ngIf/ngSwitch, ng-template, and a number of other possible solutions, but I'm having trouble connecting them to this particular scenario.

Answer 1

You may achieve that using content projection, which basically lets you pass html code to a component which is rendered inside it. Although there is no good official angular documentation about that (at least not that I'm aware), this post explain it in details