How can I show the arrows of my sorted table according to my sort order in angular?-CodePudding

I have a table that I sort from largest to smallest or alphabetically.

here is the html of the part I'm sorting

 <tr>
                     <th scope="col" [appSort]="dataList" data-order="desc" data-name="no">
                         <span (click)="sort()" > No
                            <mat-icon *ngIf="sorting === 'desc'">keyboard_arrow_down</mat-icon>
                             <mat-icon *ngIf="sorting === 'asc'">keyboard_arrow_up</mat-icon>
                         </span>
                     </th>
                     <th scope="col" [appSort]="dataList" data-order="desc" data-name="id">
                         <span (click)="sort()" >Id
                             <mat-icon *ngIf="sorting === 'desc'">keyboard_arrow_down</mat-icon>
                             <mat-icon *ngIf="sorting === 'asc'">keyboard_arrow_up</mat-icon>
                         </span>
                     </th>
                     <th scope="col" [appSort]="dataList" data-order="desc" data-name="type">Tür</th>
                     <th scope="col" [appSort]="dataList" data-order="desc" data-name="additional">Ek</th>
                     <th scope="col" [appSort]="dataList" data-order="desc" data-name="media">Medya
                     </th>
                 </tr>

**and here is my function in typescript part **

 sorting = "desc"
 sort() {
        if (this.sorting == "desc") {
            this.sorting = "asc"
        } else {
            this.sorting = "desc"
        }
    }

My problem here is that when I sort by 'NO' my arrow in 'ID' moves. How can I solve this?

When I click 'NO' I just want the arrow there to move up and down

footnote: This is my first question, please critique if I missed something.

CodePudding user response：

I am not sure you want to loop through it or not. But considering you don't want to this solution will work. I have just used basic structure from your code because didn't want to install all the modules. But this should give you an idea.

<th scope="col"  data-order="desc" data-name="no">
  <span (click)="sort('no')" > No
     <span *ngIf="sorting['no'] === 'desc'">↑</span>
      <span *ngIf="sorting['no'] === 'asc'">↓</span>
  </span>
</th>
<th scope="col"  data-order="desc" data-name="id">
  <span (click)="sort('id')" >Id
      <span *ngIf="sorting['id'] === 'desc'">↑</span>
      <span *ngIf="sorting['id'] === 'asc'">↓</span>
  </span>
</th>
<th scope="col"  data-order="desc" data-name="type">Tür</th>
<th scope="col"  data-order="desc" data-name="additional">Ek</th>
<th scope="col"  data-order="desc" data-name="media">Medya
</th>

sorting = { no: 'desc', id: 'desc' };
  sort(key: any) {
    if (this.sorting[key] == 'desc') {
      this.sorting[key] = 'asc';
    } else {
      this.sorting[key] = 'desc';
    }
  }

Main idea is to save the sorting of each column separately. Either in the data source itself or a separate object as i have shown in the example.

Hope this helps.

here is a working example. Stackblitz example

CodePudding user response：

If it's not the case you need to import private _cd: ChangeDetectorRef, into component constructor.

And add erase your sort function by:

 sorting = "desc"
 sort() {
   this.sorting = (this.sorting == "desc") ? "asc" : "desc"; 
   this._cd.markForCheck();
 }

CodePudding user response：

I think the solution depends on what your requirement is. If you want the table to be sorted on the basis of two columns then the solution given by @tarun-bhati should work assuming the sorting is working that way.

If you want that at a time, the table is sorted only by a single column, you can do something like -

  sortingOrder: string;
  sortedColumn: string;
  sort(column: string) {
    if (this.sortingOrder == 'desc') {
      this.sortingOrder = 'asc';
    } else {
      this.sortingOrder = 'desc';
    }
    this.sortedColumn = column;
  }

And then use these with then conditions in the sort icons.