ngIf else if in template

Question

How would I have multiple cases in an  ngIf statement  I m used to Vue or Angular 1 with having an if  else if  and else  but it seems like Angular 4 only has a true  if  and false  else  condition   According to the documentation  I can only do      lt ng-container  ngIf  foo     1  then first else second  gt  lt  ng-container gt     lt ng-template  first gt First lt  ng-template gt     lt ng-template  second gt Second lt  ng-template gt     lt ng-template  third gt Third lt  ng-template gt    But I want to have multiple conditions  something like       lt ng-container  ngIf  foo     1  then first  foo     2  then second else third  gt  lt  ng-container gt     lt ng-template  first gt First lt  ng-template gt     lt ng-template  second gt Second lt  ng-template gt     lt ng-template  third gt Third lt  ng-template gt    But I m ending up having to use ngSwitch  which feels like a hack      lt ng-container  ngSwitch   true  gt       lt div  ngSwitchCase  foo     1  gt First lt  div gt       lt div  ngSwitchCase  bar     2  gt Second lt  div gt       lt div  ngSwitchDefault gt Third lt  div gt     lt  ng-container gt    Alternately  it seems like a lot of the syntaxes I ve got used to from Angular 1 and Vue aren t supported in Angular 4  so what would be the recommended way to structure my code with conditions like this

User · Answer

This seems to be the cleanest way to do

if (foo === 1) {

} else if (bar === 99) {

} else if (foo === 2) {

} else {

}

in the template:

<ng-container *ngIf="foo === 1; else elseif1">foo === 1</ng-container>
<ng-template #elseif1>
    <ng-container *ngIf="bar === 99; else elseif2">bar === 99</ng-container>
</ng-template>
<ng-template #elseif2>
    <ng-container *ngIf="foo === 2; else else1">foo === 2</ng-container>
</ng-template>
<ng-template #else1>else</ng-template>

Notice that it works like a proper else if statement should when the conditions involve different variables (only 1 case is true at a time). Some of the other answers don't work right in such a case.

aside: gosh angular, that's some really ugly else if template code...

User · Answer

Another alternative is to nest conditions   lt ng-container  ngIf  foo     1 else second  gt  lt  ng-container gt   lt ng-template  second gt       lt ng-container  ngIf  foo     2 else third  gt  lt  ng-container gt   lt  ng-template gt   lt ng-template  third gt  lt  ng-template gt

User · Answer

You can just use    lt ng-template  ngIf   index    1  gt First lt  ng-template gt   lt ng-template  ngIf   index    2  gt Second lt  ng-template gt   lt ng-template  ngIf   index    3  gt Third lt  ng-template gt    unless the ng-container part is important to your design I suppose   Here s a Plunker

User · Answer

You can also use this old trick for converting complex if then else blocks into a slightly cleaner switch statement    lt div  ngSwitch   true  gt       lt button  click   foo    foo 3  1  gt Switch  lt  button gt        lt div  ngSwitchCase  foo     1  gt one lt  div gt       lt div  ngSwitchCase  foo     2  gt two lt  div gt       lt div  ngSwitchCase  foo     3  gt three lt  div gt   lt  div gt

User · Answer

To avoid nesting and ngSwitch  there is also this possibility  which leverages the way logical operators work in Javascript    lt ng-container  ngIf  foo     1  then first  else  foo     2  amp  amp  second      foo     3  amp  amp  third   gt  lt  ng-container gt     lt ng-template  first gt First lt  ng-template gt     lt ng-template  second gt Second lt  ng-template gt     lt ng-template  third gt Third lt  ng-template gt

User · Answer

You can use multiple way based on sitaution    If you Variable is limited to specific Number or String  best way is using ngSwitch or ngIf    lt  -- foo   3 -- gt   lt div  ngSwitch   foo  gt       lt div  ngSwitchCase  1  gt First Number lt  div gt       lt div  ngSwitchCase  2  gt Second Number lt  div gt       lt div  ngSwitchCase  3  gt Third Number lt  div gt       lt div  ngSwitchDefault gt Other Number lt  div gt   lt  div gt    lt  -- foo   3 -- gt   lt ng-template  ngIf   foo     1  gt First Number lt  ng-template gt   lt ng-template  ngIf   foo     2  gt Second Number lt  ng-template gt   lt ng-template  ngIf   foo     3  gt Third Number lt  ng-template gt     lt  -- foo    David  -- gt   lt div  ngSwitch   foo  gt       lt div  ngSwitchCase   Daniel   gt Daniel String lt  div gt       lt div  ngSwitchCase   David   gt David String lt  div gt       lt div  ngSwitchCase   Alex   gt Alex String lt  div gt       lt div  ngSwitchDefault gt Other String lt  div gt   lt  div gt    lt  -- foo    David  -- gt   lt ng-template  ngIf   foo      Alex   gt Alex String lt  ng-template gt   lt ng-template  ngIf   foo      David   gt David String lt  ng-template gt   lt ng-template  ngIf   foo      Daniel   gt Daniel String lt  ng-template gt   Above not suitable for if elseif else codes and dynamic codes  you can use below code    lt  -- foo   5 -- gt   lt ng-container  ngIf  foo  gt   1  amp  amp  foo  lt   3  then t13  gt  lt  ng-container gt   lt ng-container  ngIf  foo  gt   4  amp  amp  foo  lt   6  then t46  gt  lt  ng-container gt   lt ng-container  ngIf  foo  gt   7  then t7  gt  lt  ng-container gt    lt  -- If Statement -- gt   lt ng-template  t13 gt      Template for foo between 1 and 3  lt  ng-template gt   lt  -- If Else Statement -- gt   lt ng-template  t46 gt      Template for foo between 4 and 6  lt  ng-template gt   lt  -- Else Statement -- gt   lt ng-template  t7 gt      Template for foo greater than 7  lt  ng-template gt        Note  You can choose any format  but notice every code has own problems

User · Answer

you don t need to use  ngIf if you use ng-container  lt ng-container  ngTemplateOutlet   quot myTemplate      first    first   myTemplate          second    second   third quot  gt  lt  ng-container gt      lt ng-template  first gt first lt  ng-template gt     lt ng-template  second gt second lt  ng-template gt     lt ng-template  third gt third lt  ng-template gt

User · Answer

x000D   x000D   lt ion-row  ngIf  cat     1 else second  gt  lt  ion-row gt  x000D   lt ng-template  second gt  x000D       lt ion-row  ngIf  cat     2 else third  gt  lt  ion-row gt  x000D   lt  ng-template gt  x000D   lt ng-template  third gt  x000D   x000D   lt  ng-template gt  x000D   x000D   x000D       Angular is already using ng-template under the hood in many of the   structural directives that we use all the time  ngIf  ngFor and   ngSwitch         What is ng-template in Angular      https   www angularjswiki com angular what-is-ng-template-in-angular

User · Answer

Or maybe just use conditional chains with ternary operator  if     else if     else if     else chain   https   developer mozilla org en-US docs Web JavaScript Reference Operators Conditional Operator Conditional chains   lt ng-container  ngIf  isFirst   first  isSecond   second   third  gt  lt  ng-container gt    lt ng-template  first gt  lt  ng-template gt   lt ng-template  second gt  lt  ng-template gt   lt ng-template  third gt  lt  ng-template gt    I like this aproach better

[angular] *ngIf else if in template

Examples related to angular

Examples related to templates

Examples related to angular-ng-if