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.

Can you post your answer How you solve this issu

Soumya Gangamwar
– Soumya Gangamwar

2019-04-01 06:26:07 +00:00
Commented Apr 1, 2019 at 6:26 — Soumya Gangamwar
– Soumya Gangamwar, Commented Apr 1, 2019 at 6:26

GCSDC · Accepted Answer · 2019-03-29 23:54:11Z

3

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

answered Mar 29, 2019 at 23:54

GCSDC

3,5304 gold badges31 silver badges51 bronze badges

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

1 Comment

rpivovar Over a year ago

This definitely put me on a good path. Trying to figure out how to load in a specific template file based on a click, but I'll keep researching. Thanks.

Collectives™ on Stack Overflow

Angular Component with multiple templates/HTML files

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related