CODEWITHSUNDEEP
angularif-statementangular8
afeef
afeef

Reputation: 4706

How to Implement Nested NG If else conditions in Angular 8

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.

Refrence

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

Upvotes: 2

Views: 11175

Answers (2)

bryan60
bryan60

Reputation: 29335

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>

Upvotes: 5

Isaac McClure
Isaac McClure

Reputation: 29

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.

Upvotes: 2

Related Questions