Can one component have multiple templates?

Question

Is there a way for Angular 2 component to use many template files base on where i want to place it?

For example, I have a login component and i want to place it two times on my website with two different designs.

Is there a way that i can pass template to a component?

Answer 1

Not sure if NG2 has built-in way to support this. I just used a base component class to contain all or most logic and data, without a html template. Then in derived component classes, just need to declare constructor calling super(...), and define respective html template.

If your application is complex, likely you will be using module to instantiate classes, then make sure you declare moduleId: module.id in the Component attribute, otherwise the NG2 runtime may complain the html template could not be loaded.

Answer 2

The simplest way to do this, i think, is using *ngIf in your template.

<div *ngIf="template === 1"> First Template </div>
<div *ngIf="template === 2"> Second Template </div>