Angular2 dynamically loading a template

Question

I started doing some research into using Angular2 and one of the questions I had that I can't find a solution for. I have a requirement that depending on the data I receive from my model, I wish to load different templates for a given component. This is mainly related to maintaining different layouts depending on the data I receive. Is this possible?

Thanks

Uglify

Answer 1

Angular 2 favors component composition approach to UI building. Because of this you shouldn't really end up with huge templates and if so it's maybe better idea to split them up into some helper sub-components (even if they provide nothing but layout).

In cases when template isn't really big you can conditionally render based on some component's property with *ngIf directive.

Another way to approach this would be to implement routes on that component level and then programatically route to these routes after you received the data with router.navigate(['./MySubcomponent'])

Shropshire

Answer 2

Let's say there is a main component where you get the data. Based upon the data, you can choose which sub-component to use. In each sub-component, you can define the template for the specific data.

If the data is small, you can switch between the html using *ngSwith or *ngIf in your main component's template.

Unprincipled