use “OR” in *ngIf

user_7940129 0
Viewed 2026

I have a response coming from an API, and I would like to set an if condition to check if the response is 3 or 6 to set the ng-template to success else any other data gotten should be set to danger,

How do I check if the data.delivery_status is 3 or 6 ?

This is my code below which does not work:

<li *ngIf="data.delivery_status==='3' OR '6';then success else danger"></li>
<ng-template #success>
    <td><span class="btn btn-success btn-sm">Sent</span></td>
</ng-template>
<ng-template #danger>
    <td><span class="btn btn-danger btn-sm">Sent</span></td>
</ng-template>
angular-ng-if angular
6 Answers

Since the options are mutually exclusive, just add the li element twice with both variations:

<li *ngIf="data.delivery_status==='3'">
    <ng-template #success>
        <td><span class="btn btn-success btn-sm">Sent</span></td>
    </ng-template>
</li>

<li *ngIf="data.delivery_status==='6'">
<ng-template #danger>
    <td><span class="btn btn-danger btn-sm">Sent</span></td>
</ng-template>
</li>

Angular will render only one of them, depending on the value of delivery_status.

user_46146800

You can simply do like below

*ngIf="(data.delivery_status === 3 || data.delivery_status === 6);then success else danger"

Full code

<li *ngIf="(data.delivery_status === 3 || data.delivery_status === 6);then success else danger"></li>
<ng-template #success>
  <td><span class="btn btn-success btn-sm">Sent - success</span></td>
</ng-template>
<ng-template #danger>
  <td><span class="btn btn-danger btn-sm">Sent - danger</span></td>
</ng-template>

Working Stackblitz

user_85939830

use *ngIf="data.delivery_status==='3' || data.delivery_status === '6' instead of OR '6'

<li *ngIf="data.delivery_status==='3' || data.delivery_status === '6';then success else danger"></li>
<ng-template #success>
    <td><span class="btn btn-success btn-sm">Sent</span></td>
</ng-template>
<ng-template #danger>
    <td><span class="btn btn-danger btn-sm">Sent</span></td>
</ng-template>
user_75842310

<li *ngIf="data.delivery_status==='3' || data.delivery_status==='6';then success else danger"></li>

but better is to extract that condition into the component.

user_7573910

use below code for OR condition

<li *ngIf="data.delivery_status ==='3' || data.delivery_status === '6';then success else danger"></li>
user_74290770

I understood that you want success when status is '3' OR '6', but all other cases are danger. So here is my code:

<li *ngIf="data.delivery_status==='3' || data.delivery_status==='6'">
    <td><span class="btn btn-success btn-sm">Sentt - success</span></td>
</li>
<li *ngIf="!(data.delivery_status==='3' || data.delivery_status==='6')">
    <td><span class="btn btn-danger btn-sm">Sent - danger</span></td>
</li>

It's also a good opportunity to use NgSwitch.

See: https://angular.io/api/common/NgSwitch

Here is my coding suggestion:

 <li [ngSwitch]="data.delivery_status">
     <td *ngSwitchCase="'3'"><span class="btn btn-success btn-sm">Sentt - success</span></td>
     <td *ngSwitchCase="'6'"><span class="btn btn-success btn-sm">Sentt - success</span></td>
     <td *ngSwitchDefault><span class="btn btn-danger btn-sm">Sent - danger</span></td>
 </li>
user_28844680
Related