angularif-statementangular-ng-if

Nested Condition in *ngIf using ng-container


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?


Solution

  • Although your solution seems fine, another way would be to use the ngTemplateOutlet directive.

    That way you can have your ngTemplates ready and decide what you're going to 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.