how to change templateUrl value dynamically at run time in angular 2

Question

I Need to change template URL dynamically at run time so that i can change the view rendered in my component. Is there any solution to achieve this? For instance, my Component want both grid and list view, but i don't want create both the views in same template instead maintain the views in separate template file. So, how can i change the view of the component at run time.(i.e) Replacing the current template with new template. Thanks in Advance.

Answer 1

Angular doesn't support changing the template URL at runtime, because at compile time the Angular specific constructs in the template will be translated to JavaScript.

What you can do is

<ng-container *ngIf="isFoo">
 template1
</ng-container>
<ng-container *ngIf="!isFoo">
 template2
</ng-container>

alternatively you can create components dynamically at runtime, for that you need to include the dynamic runtime into the deployable. Currently this prevents AoT at all (there was some hack mentioned to make it work together somewhere but I haven't tried). This way you can define at component creation time what template to use.