How to Implement Nested NG If else conditions in Angular 8

Question

What i need

        if(field.ajax && field.ajax='Y' && field.multiple&& field.multiple=='Y')
        {

        }
        else if (field.ajax && field.ajax='Y' && field.multiple&& field.multiple=='N'))
        {
        }
        else
        {
        }

for 2 conditon works

    if(cond)
        {
        code
        }else
        {
        code
        }

this case code works

   <ng-container *ngIf="field.ajax && field.ajax === 'Y'; else select2ElseBlock">
              <ng-select
              [items]="data"
              multiple="true"
              bindLabel="name"
              [closeOnSelect]="true"
              [loading]="loading"

              [searchable]="true"
              [clearable]="true" 
              (click)="clearModel()"
              (keyup)="changed($event.target.value)">
              </ng-select>
        </ng-container>
       <ng-template #select2ElseBlock>
              <ng-select
              [items]="field.choices.choice"
              multiple="true"
              bindLabel="name"
              [loading]="loading"
              >
              </ng-select>
        </ng-template>

Multiple case i tried

but this case create problem

 <ng-container *ngIf="field.ajax && field.ajax === 'Y'  then  select2thenBlock else select2ElseBlock">
          <ng-select
          [items]="data"
          multiple="true"
          bindLabel="name"
          [closeOnSelect]="true"
          [loading]="loading"

          [searchable]="true"
          [clearable]="true" 
          (click)="clearModel()"
          (keyup)="changed($event.target.value)">
          </ng-select>
    </ng-container>
     <ng-template #select2thenBlock>
          <ng-select
          [items]="field.choices.choice"
          multiple="true"
          bindLabel="name"
          [loading]="loading"
          >
          </ng-select>
    </ng-template>
   <ng-template #select2ElseBlock>
          <ng-select
          [items]="field.choices.choice"
          multiple="true"
          bindLabel="name"
          [loading]="loading"
          >
          </ng-select>
    </ng-template>

But for multiple case create problem.

how can implement nested if else conditions in Angular 8.

Refrence

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

update question problem in multiple conditions. where i need check conditions as well — afeef
– afeef, Commented Aug 16, 2019 at 7:48

bryan60 · Accepted Answer · 2019-08-16 08:09:02Z

5

You just logically nest the conditions:

<ng-container *ngIf="field?.ajax === 'Y'; else ajaxNotY">
  <ng-container *ngIf="field?.multiple === 'Y'; else multipleNotY">
    AJAX AND MULTIPLE Y
  </ng-container>
  <ng-template #multipleNotY>MULTIPLE NOT Y</ng-template>
</ng-container>
<ng-template #ajaxNotY>AJAX NOT Y</ng-template>

edited Aug 16, 2019 at 8:09

answered Aug 16, 2019 at 8:03

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

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

1 Comment

bryan60 Over a year ago

np, you can also move the #multipleNotY template outside the ng-container if you find that more readable

Isaac McClure · Accepted Answer · 2019-08-16 07:43:11Z

2

The easiest thing to do might be to take your logic and put it in a function in the component, and then reference that in the ngIfs.

eg.

public showHideFunction() : number {
    if(field.ajax && field.ajax='Y' && field.ajax && field.multiple=='Y')
    {
        return 1;
    }
    else if (field.ajax && field.ajax='Y' && field.ajax && field.multiple=='N'))
    {
        return 2;
    }
    else
    {
        return 3;
    }
}

<div *ngIf="showHideFunction() === 1"></div>
<div *ngIf="showHideFunction() === 2"></div>
<div *ngIf="showHideFunction() === 3"></div>

A bit messy, but it would work.

answered Aug 16, 2019 at 7:43

Isaac McClure

294 bronze badges

1 Comment

bryan60 Over a year ago

function calls in template are extremely low performance and generally bad practice

Collectives™ on Stack Overflow

How to Implement Nested NG If else conditions in Angular 8

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related