CODEWITHSUNDEEP
angulartypescript
Mike Landers
Mike Landers

Reputation: 450

Angular *ngIf Condition

I am using these two conditions, the problem is that the buttons are appearing both when only one should actually appear.

Ie If = "currentState == 'pause'" a button appears, otherwise If = "currentState == 'pause' && 'taskdate'> 'data.key.deadline'" the other button appears ... the problem is that both are appearing and not just 1. I think it's because the currentState is true in both ... How can I fix this?

html

 <div *dxTemplate="let data of 'cellTemplate'">
    <button type="button" data-toggle="dropdown" class="btn ClassPlay">
                <img style="width: 35px;" *ngIf="currentState=='pause' && taskdate <= data.key.deadline" src="./assets/play.svg">
                <img style="width: 35px;" *ngIf=" currentState=='pause' && taskdate > data.key.deadline" src="./assets/PlayRed.svg">
                <div *ngIf="currentState=='start'" src="./assets/playV.svg">
                  <img style="width: 38px;" *ngIf="currentRowIndex === data.rowIndex" src="./assets/playV.svg">
                  <img style="width: 38px;" *ngIf="currentRowIndex != data.rowIndex" src="./assets/PlayGrey.svg">
                </div>
     </button>
</div>

Component

taskdate = new Date();

Image

Upvotes: 1

Views: 834

Answers (2)

StepUp
StepUp

Reputation: 38209

There is no need extra single quotes. When you use 'taskdate', then it is evaluated as string. I believe, taskdate and data?.key?.line are variables:

<img style="width: 35px;"     
    *ngIf="currentState == 'pause' && (taskDate <= data?.key?.line)" 
    src="./assets/pl.svg">
<img style="width: 35px;" 
    *ngIf="currentState == 'pause' && (taskdate > data?.key?.line)" 
    src="./assets/ap.svg">

Upvotes: 2

Adrita Sharma
Adrita Sharma

Reputation: 22203

Don't add extra '' and add additional check on the 1st item taskdate <= data.key.line

Try this:

 <img style="width: 35px;" *ngIf="currentState == 'pause' && taskdate <= data.key.line" src="./assets/pl.svg">
 <img style="width: 35px;" *ngIf="currentState == 'pause' && taskdate > data.key.line" src="./assets/ap.svg">

Working Demo

Upvotes: 2

Related Questions