Different between *ngIf vs [ngSwitch] in Angular 2+

Question

What are the differences between [ngSwitch] and a bunch of *ngIfs. Any performance factors we should be concerned about?

*ngIf

  <div *ngIf="day === 'MONDAY'">
     Keep calm and pretend it's not Monday.
  </div>
  ...
  <div *ngIf="day === 'FRIDAY'">
     Happy Friday!
  </div>

[ngSwitch]

<ng-container [ngSwitch]="day">

     <div *ngSwitchCase="'MONDAY'">
         Keep calm and pretend it's not Monday.
     </div>
     ...
     <div *ngSwitchCase="'FRIDAY'">
         Happy Friday!
     </div>

</ng-container>

https://codecraft.tv/courses/angular/built-in-directives/ngif-and-ngswitch/ — RN92, Jan 02 '19 at 03:16
similar using angular js - https://stackoverflow.com/questions/16741949/ngif-and-ngswitch-angularjs — Tushar Walzade, Jan 02 '19 at 06:34

score 10 · Answer 1 · edited Jan 02 '19 at 06:43

10

For *ngIf, every condition will be checked and the code inside the true condition will be executed.

For [ngSwitch], only the code inside the specific case will be executed (using break;).

So, [ngSwitch] will be faster where there are multiple cases.

edited Jan 02 '19 at 06:43

Tushar Walzade

3,737
4
33
56

answered Jan 02 '19 at 04:14

Mohammad Yasir Arafat

655
4
13

score 2 · Answer 2 · answered Jan 02 '19 at 03:44

ngIf is basically a version of ngSwitch with a single condition. It's different from ngShow in that it removes the actual DOM element rather than simply hiding it. If you're using an ngSwitch with just a singly truthy condition check, then I believe ngIf will do the same thing.

score 0 · Answer 3 · answered Jan 02 '19 at 04:14

*ngIf works like if statement and ngSwitch (actually comprised of two directives, an attribute directive, and a structural directive) work as a switch statement in the DOM.

Knowing the difference between if-else statement and switch cases will help you understand further, https://techdifferences.com/difference-between-if-else-and-switch.html

Different between *ngIf vs [ngSwitch] in Angular 2+

3 Answers3