Angular 5 best way to to show components based on configuration

Question

In my application, I have dashboard component. In the dashboard component OnInit, I call a service that return me a configuration with 3 possible usecases.

Basically the answer is something like that :

{
  "usecase": "usecase1" // "usecase2" or "usecase3"
}

For each usecase, the whole dashboard content will not be the same.

I have 3 components for each usecase : useCase1Component, useCase2Component, useCase3Component

I want to know the best way to show/render the right component based on the usecase.

I could maybe do this using *ngIf like this in the dashboardComponent html :

<useCase1Component *ngIf="showUseCase1"></useCase1Component>
<useCase2Component *ngIf="showUseCase2"></useCase2Component>
<useCase3Component *ngIf="showUseCase3"></useCase3Component>

But I'm not sure it's the best way, and I don't see how I could achieve this in another way with good performance.

Using dynamic component loading isn't always the best way to go, in specific scenarios it won't work at all. Such as having to apply directives to a component for instance. I would use *ngIf or *ngSwitch in your case. — Chrillewoodz
– Chrillewoodz, Commented May 30, 2018 at 9:35
Exactly @Chrillewoodz, I've already saw dynamic components and I was not convinced that it works well in my scenario. Moreover, ngIf/ngSwitch would work but is it the best way to go in term of practicies and performance ? — Imad El Hitti
– Imad El Hitti, Commented May 30, 2018 at 9:41
@ImadElHitti Ye it's completely fine to use it. I'm using it as well and my scenario is way bigger than yours, trust me. I've got massive configs that can be endless so I'm recursively rendering components based on this solution. I even had to switch from the dynamic component way since it didn't allow me to do what I needed. — Chrillewoodz
– Chrillewoodz, Commented May 30, 2018 at 9:44

Joe Belladonna · Accepted Answer · 2018-05-30 09:44:28Z

1

You can use *ngIf. That is Angulars way of showing or hiding items. Performance is excelent, and you have nothing to worry about it.

answered May 30, 2018 at 9:44

Joe Belladonna

1,35914 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 5 best way to to show components based on configuration

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related