Angular2 - Switch Components

Question

Let's say that I have a list of elements. The first one is a course, the second is an exam and the third is a course again and the fourth is a curriculum.

I want to show this list. So I make a loop with *ngFor, and I have 3 different components for my list items.

I'm looking for the best solution.

<div *ngFor="let item of items">
  <course [item]="item" *ngIf="item.type == 1"></course>
  <exam [item]="item" *ngIf="item.type == 2"></exam>
  <curriculum [item]="item" *ngIf="item.type == 3"></curriculum>
</div>

It doesn't seems to be the best solution.

score 1 · Accepted Answer · answered May 03 '17 at 20:04

Not sure what you consider "the best" looks like, but if you are looking to use ngSwitch, here it is

<div *ngFor="let item of items" [ngSwitch]="item.type">
  <course [item]="item" *ngSwitchCase="1"></course>
  <exam [item]="item" *ngSwitchCase="2"></exam>
  <curriculum [item]="item" *ngSwitchCase="3"></curriculum>
</div>

Angular2 - Switch Components

1 Answers1