How do I change the font color upon the expiration date?

user_13961545 0
Viewed 170

I want set color when the expiration date has not yet been reached green. But when the expiration date is red

.curentDate {
    color: rgb(54, 168, 54)
}

.expirationDate{
    color:  red;
}
<div class="form-group col">
    <h5 for="maintenancePackage">Maintenance Package</h5>
    <p class="{{ setexpirationDate(ticket) }}">{{ getMaPackage(ticket) }}</p>
</div>

app.ts

  setexpirationDate(ticket) {
    let color = ''
    const endDate = moment(ticket.site.maEndDate.seconds * 1000).format('L');
    const currentDate = new Date()
    const currentDateFormat = moment(currentDate).format('L');
    if (endDate < currentDateFormat) {
      color = 'curentDate'
    } else {
      color = 'expirationDate'
    }
  }
angular8 angular css html
3 Answers

You need to return the color variable

setexpirationDate(ticket) {
    let color = ''
    const endDate = moment(ticket.site.maEndDate.seconds * 1000).format('L');
    const currentDate = new Date()
    const currentDateFormat = moment(currentDate).format('L');
    if (endDate < currentDateFormat) {
      color = 'curentDate'
    } else {
      color = 'expirationDate'
    }
    return color // you need to return the value
  }
user_55706660

Your condition is wrong.

if (endDate < currentDateFormat) {
      color = 'curentDate'
    } else {
      color = 'expirationDate'
    }

You are setting trying to set the color green when the date is expired and red for the opposite.

Solution:

HTML:

<p [ngClass]="{isExpired?'expirationDate':'currentDate'}">{{ getMaPackage(ticket) }}</p>

TypeScript:

get isExpired() {
    let color = ''
    const endDate = moment(ticket.site.maEndDate.seconds * 1000).format('L');
    const currentDate = new Date();
    const currentDateFormat = moment(currentDate).format('L');
    return endDate < currentDateFormat;
  }
user_45710400

Have you tried adding !important on the color? e.g

.expirationDate{
    color:  red !important;
}
user_150345050
Related