Is there elseIf in Angular 4

Question

I have a number of statements

<ng-template [ngIf]="xyz== 1">First</ng-template>
<ng-template [ngIf]="pqr == 2">Second</ng-template>
<ng-template [ngIf]="abc == 3">Third</ng-template>

Multiple conditions in above statement can be true.

But what i want is, first check for first statement if true then display and leave the rest

If false, then check for second and so on

how to achieve this?

Possible duplicate of [How to use \*ngIf else in Angular 4?](https://stackoverflow.com/questions/43006550/how-to-use-ngif-else-in-angular-4) — Supamiu, Aug 02 '17 at 14:08
@Supamiu the question is totally different , Please read the description i dnt want just if and else multiple condtions can be true but i want to display the first one which is true and leave the rest — Ankit Raonka, Aug 02 '17 at 14:12
@Supamiu i need if elseif else, can u suggest if there i any other solution — Ankit Raonka, Aug 02 '17 at 14:13
Maybe it's more like https://stackoverflow.com/questions/43812770/angular-4-ngif-else-if then , but there's no `else if` at the moment, mainly because `else if` is less used now, it's either replaced by multiple `if` or a `switch`. — Supamiu, Aug 02 '17 at 14:15
@Supamiu i checked out this link also but even switch need one condition to be true so that it can define which statement to execute — Ankit Raonka, Aug 02 '17 at 14:27
https://angular.io/api/common/NgSwitch http://plnkr.co/edit/IXmUm2Th5QGIRmTFBtQG?p=preview — JGFMK, Aug 02 '17 at 18:32

yurzui · Answer 1 · 2017-08-02T18:37:14.437

You can try using ngIf directive like:

<ng-template [ngIf]="xyz == 1" [ngIfElse]="second">First</ng-template>
<ng-template #second>
  <ng-template [ngIf]="pqr == 2" [ngIfElse]="third">Second</ng-template>
</ng-template>
<ng-template #third>
  <ng-template [ngIf]="abc == 3">Third</ng-template>
</ng-template>

with ng-container it will look as follows:

<ng-container *ngIf="xyz == 1; else second">First</ng-container>
<ng-template #second>
    <ng-container *ngIf="pqr == 2; else third">Second</ng-container>
</ng-template>
<ng-template #third>
    <ng-container *ngIf="abc == 3">Third</ng-container>
</ng-template>

But if you want to use for loop statement i can offer the following solution:

<ng-container *ngTemplateOutlet="next; context: { $implicit: 0 }"></ng-container>

<ng-template #next let-i>
  <ng-container *ngIf="conditions[i]">
    <ng-container *ngIf="conditions[i] && conditions[i].condition(); else shift">{{ conditions[i].result }}</ng-container>
      <ng-template #shift >
        <ng-container *ngTemplateOutlet="next; context: { $implicit: i + 1 }"></ng-container>
      </ng-template>
  </ng-container>
</ng-template>

where conditions

conditions = [
  {
    condition: () => this.xyz === 1,
    result: 'First'
  },
  {
    condition: () => this.pqr === 2,
    result: 'Second'
  },
  {
    condition: () => this.abc === 3,
    result: 'Third'
  }
];

Plunker Example

if i write it manually its fine but can have multiple statements and i populating it with a for loop. writing first , second would be a prob — Ankit Raonka, Aug 02 '17 at 14:30
maybe i can do "other1" "other2" for now. Is there any other efficient way u can think of? — Ankit Raonka, Aug 02 '17 at 14:31
I am using Reactive forms in Angular , the problem comes when i have multiple validations and i want to show error message for the first failed validation — Ankit Raonka, Aug 02 '17 at 14:37
I have those validation's return error strings say firstName.errors.textLength and an array containing error messages to show corresponding to validators — Ankit Raonka, Aug 02 '17 at 14:37

score 2 · Answer 2 · answered Aug 02 '17 at 14:17

2

No Currently elseif is not supported

Ngifelse https://angular.io/api/common/NgIf

answered Aug 02 '17 at 14:17

Piyush Gupta

71
4

score 2 · Answer 3 · answered Aug 02 '17 at 14:31

2

Why not just do more work in the component:

<ng-template [ngIf]="status == 'first'">First</ng-template>
<ng-template [ngIf]="status == 'second'">Second</ng-template>
<ng-template [ngIf]="status == 'third'">Third</ng-template>

in component code:

status string;
if (xyz == 1)
   status = 'first';
else if (pqr == 2)
   status = 'second';
else if (abc == 3)
   status = 'third';

answered Aug 02 '17 at 14:31

Dean Chalk

20,076
6
59
90

I am using Reactive forms in Angular , the problem comes when i have multiple validations and i want to show error message for the first failed validation – Ankit Raonka Aug 02 '17 at 14:34
I have those validation's return error strings say firstName.errors.textLength and an array containing error messages to show corresponding to validators – Ankit Raonka Aug 02 '17 at 14:36

score 0 · Answer 4 · answered Mar 22 '23 at 04:39

Another alternative is to use *ngIf-then-else and ternary operator:

<ng-container *ngIf="isFirst; then first; else (isSecond ? second : third)"></ng-container>

<ng-template #first>First</ng-template>
<ng-template #second>Second</ng-template>
<ng-template #third>Third</ng-template>

Is there elseIf in Angular 4

4 Answers4