Nested Condition in *ngIf using ng-container

user_14419448 0
Viewed 942

I am working on requirements where I need to show the list of rows based on some conditions. There is a table cell(td) whose value should be populated based on some condition. I want the following to achieve in angular using *ngIf

if(value1||values2)
{
    if(value3!=null && value4==null)
    {
        //display value 3
    }
    else
    {
     //display value 4
    }
}
else
{
//display default value
}

Pictorial representation of what I want to achieve Diagram I tried this using *ngIf but getting an error **Bidings cannot contain assignments **

<ng-container *ngIf="(value1 || value2); else showDefault">
    <ng-container *ngIf="value3!=null && value4==null; else showValue4">
    </ng-container>
    <ng-template #showValue4>
    </ng-template>
</ng-container>
<ng-template #showDefault>
</ng-template>

Is there any other way to achieve this?

angular-ng-if angular if-statement
2 Answers

Although your solution seems fine. Another way it could be to use the ngTemplateOutlet directive.

That way you can have your ngTemplates ready, and decide what you gonna use by the name of the template like this:

<ng-container *ngTemplateOutlet="selected">
  This text is not displayed
</ng-container>

<ng-template #template1>
  <p>This is our template.</p>
</ng-template>

<ng-template #template2>
  <p>This is another template.</p>
</ng-template>

<ng-template #template3>
  <p>This is one more template.</p>
</ng-template>

<button (click)="selected = template1" >1</button>
<button (click)="selected = template2" >2</button>
<button (click)="selected = template3" >3</button>

Here you can read more.

Here I created a StackBlitz, to play around.

user_64428410

try

<ng-container *ngIf="value3 && !value4; else showValue4">
user_85759490
Related