1
\$\begingroup\$

I am using Angular 8.x. I have a table with two columns that can be sorted. You can only sort one column at a time. I have conditions that display an up and down sort icon if neither column is being sorted, or a up or down sort icon depending on the sort direction. Is there a better way to write this condition?

html

  <th scope="col"> Issue Opened At
    <i class="fa fa-fw"
       [ngClass]="{'fa-sort': (!sortCol || sortCol == 'last_commit_date'),
                   'fa-sort-up': (sortCol && sortCol != 'last_commit_date' && !isDescSort),
                   'fa-sort-down': (sortCol && sortCol != 'last_commit_date' && isDescSort)}"
       (click)="onSort('created')">
    </i>
  </th>
  <th scope="col"> Issue Updated At
    <i class="fa fa-fw"
       [ngClass]="{'fa-sort': (!sortCol || sortCol == 'created_at'),
                   'fa-sort-up': (sortCol && sortCol != 'created_at' && !isDescSort),
                   'fa-sort-down': (sortCol && sortCol != 'created_at' && isDescSort)}"
       (click)="onSort('updated')">
    </i>
  </th>  

component

sortCol = '';

onSort = (col) => {
  this.sortCol = col;
  this.isDescSort = !this.isDescSort;
}

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.