0

I have "md-grid-list" to display cards in the grid. I am looping my array of data using "ngFor". How to compare each of the datetime element in the array with the given DateTime using "ngIf"? and if the condition passes successfully, the color of the card to be set to green and if the condition is not satisfied, the color of the card is set to different color.

<md-grid-list cols="4"  rowHeight="250px" gutterSize="20px">
  <md-grid-tile  *ngFor="let data of mydata" >
        <div *ngIf="(data.myDatetime | date:'HH:mm:ss, MMMM dd') < (myCurrentDateTime |date:'HH:mm:ss, MMMM dd')">

      <md-card [style.background]="'red'" [style.minHeight]="'100%'">   
    <md-card-title></md-card-title>
    <md-card-title></md-card-title>
    <md-card-content>
    <h2>
    </h2>
    </md-card-content>  
    </md-card>
        </div>
  </md-grid-tile>
</md-grid-list>
user2301
  • 1,857
  • 6
  • 32
  • 63

1 Answers1

1

JavaScript uses objects to store date values. When you want to compare if two dates are equal don't do this date1 === date2. That will just tell you if the two variables reference the same object.

To check if two dates are equal use the getTime() method of the date object. Like this:

date1.getTime() == date2.getTime()

Be careful because any difference in seconds will fail to match the dates.

In your case, it will be:

ngIf="data.myDatetime.getTime() < myCurrentDateTime.getTime()"

If dates formats are in Unix time stamp:

ngIf="data.myDatetime < myCurrentDateTime"

Hope it helps

Amadou Beye
  • 2,538
  • 3
  • 16
  • 37
  • The date formats are in Unix time stamp. For e.g these are the two dates 1494315270412 and 1494258011370. How do I compare these dates? – user2301 May 10 '17 at 07:41