Angular - How to load templateUrl dynamically?

Question

I have to build an application which supports dynamic template rendering. For example, consider following templates for landing page.

theme1/home.html

<div>Welcome ${name}!</div>

theme2/home.html

<div>Welcome ${name}!</div>
<p>Sed ut perspiciatis unde omnis iste natus  inventore</p>

If user 'A' logs in, theme1/home.html should be rendered whereas for user 'B', theme2/home.html should be rendered.

I have to maintain 10-15 themes in my application and particular theme should be rendered based on logged in user dynamically.

If I make the templateUrl dynamic by appending the variable path to filename as follows, its not working.

templateUrl: pathToThemeFolder + '/home.html'

Please suggest how to achieve this requirement?

You can define routes as per diff theme and redirect user to specific route based on condition. — hrdkisback, Mar 12 '19 at 10:40

score 0 · Answer 1 · answered Mar 12 '19 at 10:36

0

To Implement such a dynamic scenario you need to save theme detail on backend side with the user.

API by which you are checking for a valid user, get theme details as well in the response of API and based on it you can load the theme.

answered Mar 12 '19 at 10:36

Mohit Saxena

score 0 · Answer 2 · answered Mar 12 '19 at 11:01

0

dynamic scenario needs template url ( use API services) Httpclientservice directive and import data(themes) and export themes of based on API key

answered Mar 12 '19 at 11:01

Dasu Prakash

2 Answers2