I am encountering an issue with a [ngClass] on my Production environment, which was working correctly in the local environment. Despite not being able to replicate the problem locally, debugging on production reveals that the class is initially applied but then removed afterwards.
If the [ngClass] continues to malfunction on PROD, what alternative approaches can be considered?
CSS
#main .drawing-select {
min-width: 285px;
margin-bottom: 15px;
}
#main .highlight {
border: 3px solid #66bb6a;
}
HTML
<div cdkDropList class="drawing-select-container" (cdkDropListDropped)="drop($event)">
<div *ngFor="let c of configs;let i = index" cdkDrag>
<mat-card [ngClass]="outLine(c.UpdatedTimestamp)" (click)="selectConfig(i)" fxLayout="column" fxLayoutAlign="center center"
@fadeInAnimation>
<img src="{{ c.SignedUrl }}&width=200&height=150" />
<span>{{c.Content.Title}}</span>
</mat-card>
</div>
</div>
TS
public outLine(timeStamp: Date): any {
const date = new Date();
const currentDate = moment(date, 'YYYY-MM-DD').add(-2, 'd').toDate();
timeStamp = moment(timeStamp, 'YYYY-MM-DD').toDate();
const value = timeStamp >= currentDate ? true : false;
return {
'highlight': value,
'drawing-select': true
};
}