Adding sorting icons to headers- not issue but question.

[d052057]

if I have a header like this:

<th scope="col" [appSort]="dataResult" data-order="none" data-name="id">Id <i class='float-end bi bi-arrow-down-up'></i></th>

How do I change Icon to bi-arrow-down-up or bi-arrow-down (asc or desc)?

Thank you.

[d052057]

here is what I come up with and I don't know it is the right way to this or not. Here is the code:

elem.childNodes[1].classList.remove('bi-arrow-down-up');
    if (order === "desc") {
      this.appSort.sort(sort.startSort(property, order, type));
      elem.setAttribute("data-order", "asc");
      elem.childNodes[1].classList.remove('bi-arrow-down');
      elem.childNodes[1].classList.add('bi-arrow-up');
    }
    else {
      this.appSort.sort(sort.startSort(property, order, type));
      elem.setAttribute("data-order", "desc");
      elem.childNodes[1].classList.remove('bi-arrow-up');
      elem.childNodes[1].classList.add('bi-arrow-down');
    }

Thanks.