Angular2 Dynamic component display

Question

I need some advice. I'm developing a dashboard in Angular2. My project can have different types and I want to display a component relating to each of these types.

This is how I do for now:

<div *ngIf="project.types.type1">
   <app-type1></app-type1>
</div>
<div *ngIf="project.types.type2">
   <app-type2></app-type2>
</div>
<div *ngIf="project.types.type3">
   <app-type3></app-type3>
</div>

But I would like to know if it's possible to write it in a more elegant way that could look this:

   <div *ngFor="let key of project.types | keys">
       <template name="app-{{key}}></template>
    </div>

Thanks

you may use different Routes to load different components in the router-outlet based upon your project type, did you give a thought on that? — Madhu Ranjan
– Madhu Ranjan, Commented Dec 2, 2016 at 19:41
What is the content of these components (app-type1, app-type2...)? If it is just template then you can use ngTemplateOutlet or ngForTemplate like here stackoverflow.com/questions/39974126/… — yurzui
– yurzui, Commented Dec 2, 2016 at 19:55
@MadhuRanjan my project can have many types. Each type can be display as a component, e.g.: if my project has type1, I will include the app-type1 component, and if it also has type2, I will include app-type1 AND app-type2 inside the view. — Julien Deruere
– Julien Deruere, Commented Dec 2, 2016 at 20:13
In that case you may load components dynamically using Component Factory, you will have to make a dictionary of app-type and selector though. — Madhu Ranjan
– Madhu Ranjan, Commented Dec 2, 2016 at 20:19

Kevin Aud · Accepted Answer · 2016-12-02 20:13:55Z

0

This isn't the looping solution you were looking for but its still a slight improvement in elegance from how you are currently doing it (in my opinion)

<div [ngSwitch]="project.types">

  <app-type1 [*ngSwitchCase]="project.types.type1"></app-type-1>
  <app-type2 [*ngSwitchCase]="project.types.type2"></app-type-2>
  <app-type3 [*ngSwitchCase]="project.types.type3"></app-type-3>

</div>

answered Dec 2, 2016 at 20:13

Kevin Aud

3982 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Angular2 Dynamic component display

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related