Angular 9 change mat row color dynamically

Question

I compare 2 dates like this

for (let i = 0; i < 9; i++) {

    this.date1 = formatDate(data.elements[i].date_expiration, 'yyyy-MM-dd', 'fr_FR');
    this.date2 = formatDate(new Date(), 'yyyy-MM-dd', 'fr_FR');
    this.date1 = Date.parse(this.date1);
    this.date2 = Date.parse(this.date2);
    this.result = this.date1 >= this.date2 ? true : false;
    console.log(this.result);
    if (this.date1 >= this.date2) {
        this.isExpire = true;
    } else {
        this.isExpire = false;
    }

}

this work good and I see 1 false and 8 true in console

<mat-row *matRowDef="let assets; columns: displayedColumns;" [ngClass]=" isExpire ? 'is-red' : 'is-white' "></mat-row>

But all my row are now in red

What is wrong ?

Answer 1

Jean, you has an array of object. You need add a new property to the object to know if the object is expired or not (you can not use an unique variable). For this use a forEach after you get the data (I suppose inside a subcription function)

data.elements.forEach((x:any)=>{
   //x is the object
    const date1 = formatDate(x.date_expiration, 'yyyy-MM-dd', 'fr_FR');
    const date2 = formatDate(new Date(), 'yyyy-MM-dd', 'fr_FR');
    //you create the new property only write x.nameOfproperty
    //see that, as you formated the data as yyyy-MM-dd, you needn't
    //calculate the real Date,e.g. two string: "2020-02-15" is less than "2020-07-20"
    x.isExpire=date1>=date2
})

Then just use the new property "asking" about the property

<mat-row *matRowDef="let assets; columns: displayedColumns;" 
    [ngClass]=" assets.isExpire ? 'is-red' : 'is-white' ">
</mat-row>