Angular determine style based off conditional

Question

I am trying to change the row of a table to #0093ff; if the Holidays.HolidayDate is the next upcoming holiday.

NEW CODE:

<table ng-if="model.Holidays" class="table">
                        <tr>
                            <th>Holiday</th>
                            <th>Date</th>
                            <th>Branch</th>
                            <th>Hours</th>
                        </tr>
                        <tr ng-repeat="Holidays in model.Holidays" ng-style="isUpcomingHoliday(Holidays.HolidayDate) ? 'color:#0093ff' : '' ">
                            <td>{{Holidays.HolidayName}}</td>
                            <td>{{Holidays.HolidayDate | fulldaydate}}</td>
                            <td>{{Holidays.Branch ? Holidays.Branch : 'All'}}</td>
                            <td>{{Holidays.Hours ? Holidays.Hours : 'Closed'}}</td>
                        </tr>
                    </table>

JS

.filter('isUpcomingHoliday', ['$filter',
    function ($filter) {
        return function (input) {
            const sortedHolidays = this.model.Holidays.sort((a, b) => {
                return moment(b.date).isAfter(moment(a.date))
            });

            const upcomingHoliday = sortedHolidays[0];

            return moment(holidayDate).isSame(upcomingHoliday);
        };
    }])

Answer 1

You can achieve it by sorting holidays and compare with the first element. I think it can look like this:

isUpcomingHoliday(holidayDate) {
  const sortedHolidays = this.model.Holidays.sort((a, b) => {
                           return new Date(b.HolidayDate) - new Date(a.HolidayDate)  
                         };

  return holidayDate.getTime() === sortedHolidays[0].getTime();
}

---

<section class="module module-divider-bottom" data-app="global">
            <div class="container" ng-controller="ContactController">
                <div class="container">
                    <table ng-if="model.Holidays" class="table">
                        <tr>
                            <th>Holiday</th>
                            <th>Date</th>
                            <th>Branch</th>
                            <th>Hours</th>
                        </tr>
                        <tr ng-repeat="Holidays in model.Holidays" ng-style="isUpcomingHoliday(Holidays.HolidayDate) ? 'background-color:#0093ff' : '' ">
                            <td>{{Holidays.HolidayName}}</td>
                            <td>{{Holidays.HolidayDate | fulldaydate}}</td>
                            <td>{{Holidays.Branch ? Holidays.Branch : 'All'}}</td>
                            <td>{{Holidays.Hours ? Holidays.Hours : 'Closed'}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </section>

It could be better and more readable with moment.js:

isUpcomingHoliday(holidayDate) {
  const sortedHolidays = this.model.Holidays.sort((a, b) => {
                           return moment(b.date).isAfter(moment(a.date)) 
                         };
  const upcomingHoliday = sortedHolidays[0];  

  return moment(holidayDate).isSame(upcomingHoliday);
}

Answer 2

Something like this should do the trick. I didn't know if you already had an api that tells you the next holiday, If you are using moment to check if the date is the same (or if you already have something to compare dates). I chose the class vs ngStyle because you might want to style other things related to that holiday. Hope that helps.

isNextHoliday (holidayDate): boolean {
 // return some function that compares the two dates
}

.some-color {
  background: red;
}

<section class="module module-divider-bottom" data-app="global">
  <div class="container" ng-controller="ContactController">
    <div class="container">
      <table ng-if="model.Holidays" class="table">
        <tr>
          <th>Holiday</th>
          <th>Date</th>
          <th>Branch</th>
          <th>Hours</th>
        </tr>
        <tr ng-repeat="Holidays in model.Holidays">
          <td>{{Holidays.HolidayName}}</td>
          <td [class.some-color]="isNextHoliday(Holidays.HolidayDate)">{{Holidays.HolidayDate | fulldaydate}}</td>
          <td>{{Holidays.Branch ? Holidays.Branch : 'All'}}</td>
          <td>{{Holidays.Hours ? Holidays.Hours : 'Closed'}}</td>
        </tr>
      </table>
    </div>
  </div>
</section>