Dynamic templateUrl in Angular 8

Question

Going through angular docs. It is obvious that there is no provision for importing templates dynamically in the templateUrl property of @Component decorator, so is there a way or workaround to achieve this in angular7+?

My templates can be more than two, in fact in most case above 4 as of now. The issue is that I have about four websites that shares the same code and functionality but different layout for each corresponding page of the 4 sites. So I just need a dynamic templateUrl reference in other to use the same code-base but just switch template based on some condition that validate the current website (probably from the env variable)

you have to load different tamplates based on what? a property on the component? — Luca Regazzi, Aug 27 '19 at 18:08
No. Templates in Angular are *compiled* into JavaScript by the AOT. This question has been asked here many times. — Reactgular, Aug 27 '19 at 19:02
Possible duplicate of [Switch between mobile or desktop template using condition in templateUrl (Angular 7)](https://stackoverflow.com/questions/57172724/switch-between-mobile-or-desktop-template-using-condition-in-templateurl-angula) — Reactgular, Aug 27 '19 at 19:02
Try something like this https://stackoverflow.com/a/47133659/2266525 — Siddhartha Gupta, Aug 28 '19 at 10:48
env variables @LucaRegazzi, I already edited the question for more clarifications — Samuel, Aug 28 '19 at 13:14
Thank you for pointing out that solution @SiddharthaGupta. However, I have seen that solution before, though I didn't bother to try it out, I believe it will add a lot of complexity to the project, because almost (if not) all the components has different layouts for each of the 4 projects. — Samuel, Aug 28 '19 at 13:31
Thank you @Reactgular, but that wouldn't help. It is entirely different from what I intend to achieve. I don't want to "route dynamically" I want to change "only the templates dynamically", and still maintain the same component. It doesn't make sense to have 4 or more component with exactly the same typescript code, does it? You can check the edited question for details. — Samuel, Aug 28 '19 at 13:37
Not sure how you are getting the parameters for condition matching... another simple approach could be - https://stackblitz.com/edit/angular-6-dynamic-template-url?file=src%2Fapp%2Fchild%2Fchild.component.ts — Siddhartha Gupta, Aug 29 '19 at 04:30
Nice one @SiddharthaGupta, Though this solution still wouldn't solve the problem because of "condition for parameter matching", However it opened my eyes to the reason why what I want to achieve is "impossible". The parameter matching is based on environment variable which is not available at build time, so there is probably no way it could be resolved. Thanks for this. — Samuel, Aug 29 '19 at 14:10

score 2 · Accepted Answer · answered Aug 28 '19 at 13:26

2

You can create 4 different components with there own templates and move the shared code to a service and then inject that service in all 4 components Add a parent component which will decide which component should be used

answered Aug 28 '19 at 13:26

Barkha

702
3
8

Thanks. This is exactly the way I'm currently handling it. I just feel/hope there may be better way to go around it, because what this mean is that each of the the project will have a full flesh configuration, I mean individual router, modules and the rest. So that is what I'm trying to avoid by using that approach, which is what I'm currently doing. – Samuel Aug 28 '19 at 13:45

score 0 · Answer 2 · answered Jul 20 '22 at 20:33

My preferred approach for cases like this is to create an abstract parent component and 4 child components. The template will be ignored on that component. The child components can be just boiler plate. You can choose to override methods, combine them, or do nothing and purely use the parent methods. This is not the most concise way to accomplish a dynamic template, but I find the code more standardized and easier to follow especially if you need specialized methods for a particular template. You would need to use an ng-switch or other control method to dynamically choose the proper component where you want to use it.

@Component({
  selector: 'app-parent-component'
})
export abstract class ParentComponent<FormModel> implements OnInit 
{
   ...
}


@Component({
  selector: 'app-child-1',
  templateUrl: './child-1.component.html',
  styleUrls: ['./child-1.component.scss'],
})
export class Child1Component extends ParentComponent<LoginFormModel> implements OnInit {
  ...
}

Dynamic templateUrl in Angular 8

2 Answers2