Is it possible to switch Angular HTML Templates?

Question

Lets say we have a service holding mobile: boolean value. Depending on it we display proper TemplateUrl for components which need it.

So it would be something like TemplateUrl: condition ? template_1 : template_2 TemplateUrl: condition ? template_1 : template_2

I can create something similar with require but it won't build for prod properly. When I go to page with it I see null instead of template (only prod).

Angular version 7

Answer 1

The @Component declaration is processed statically with AOT complication and templateUrl cannot be provided based on a variable.

A way to handle this is to separate out your logic from the way the page is rendered. Any piece of UI that is displayed differently on mobile and desktop you can create separate component for. The main component or a shared base class or component should contain all logic.

<div>

  <p>Graph:</p>

  <graph-mobile *ngIf="mobile" [data]="data"></graph-mobile>

  <graph-desktop *ngIf="!mobile" [data]="data"></graph-desktop>

</div>