0

I've read the guide on Dynamic Component Loading, however I'm not quite sure it exactly solves what I would like.

I have the concept of different 'brands' let's say, and based on a 'brand' variable, would like to load a different UI for a number of components. Now based on the above link, I could create a brand specific Component for each brand, and then have something which does:

if (brand == A) {
    return Component1BrandA
} else if(brand == B) {
    return Component1BrandB
}
 ...

The problem with this is that it would be super verbose, and I want to keep any 'brand' specific if/else mentions out of the code. This is so that as new 'brands' are added, I can just add templates/Components somewhere based on a 'brand' directory or something and they just get automatically picked up.

e.g. I would prefer something like:

return "Component1Brand${brand}"

What are my options here? Is it possible to dynamically set the Component name to get using a variable?

Or if there is no avoiding 'brand' specific if/else stuff, would I be better off adding different sections within existing component templates and just showing and hiding them based on the 'brand'?

<div *ngIf="isBrandA"></div>
<div *ngIf="isBrandB"></div>
rossco
  • 523
  • 4
  • 20
  • When you say - based on a 'brand' variable, would like to load a different UI for a number of components - Does it mean the whole UI is different or some parts can be reused? How many brands are we talking about 100s. 1000s or more? – Apoorva Chikara Oct 29 '21 at 04:43
  • Keep the barnd info in a config file and load brand specific components at the load by checking that config file – Vega Oct 29 '21 at 04:47
  • @ApoorvaChikara: At the moment it's only a handful of brands, but doing any kind of if/else block for this purpose is not desirable. The UI's will be similar at this point, but there's no reason why they couldn't be completely different so it needs to be flexible. – rossco Oct 30 '21 at 06:28
  • @Vega Assuming I keep a config file, what exactly am I storing in it? Could you give an example of how that resolves the issue? – rossco Oct 30 '21 at 06:29

0 Answers0