javascript - sorting custom pipe in angular with Up/down img and by default Res List(-) with img (-) arrow

Question

I would like to implement img with for sorting table by all the field via custom pipe. It work properly if I only Asc and Desc pipe but when I'm added the (-) for without sorting it not work properly.

by default get the API response with button image dash but when i change it ascending order it 1st time get the sortValue pipe dash so it not work when i click 1st time but when i click 2nd time for descending order it got prefect result.. Html :

<div class= "row">
    <div class="col-md-2">
    <input
      [(ngModel)]="name"
      class="form-control"
      placeholder=" name"
    />
    <button
      class="filter-down-arrow"
      (click)="changeOrder(sortIconLabel, 'label')"
    >
      <img *ngIf="expression" src="assets/images/arrow-{{sortIconLabel }}.png"/>
    </button>
  </div>

  <div class="col-md-2">
    <input
      class="form-control"
      [(ngModel)]="location"
      placeholder="Location"
    />
    <button
      class="filter-down-arrow"
      (click)="changeOrder(sortIconlocation, 'locations')"
    >
      <img src="assets/images/arrow-{{ sortIconlocation }}.png" />
    </button>
  </div>
</div>

    <nb-card
  *ngFor="
    let area of lstUser
      | sortOrder: sortOrderBy:sortValue:'label';
    let i = index
  "
>
  <nb-card-body class="p-0">
    <div class="row m-0">
      <div class="col-md-1 pl-1 pr-0 align-self-center">
        <div class="area-image mx-auto"></div>
      </div>
      <div class="col-md-2 mt-4">
        <label class="label d-block">{{ content.zone }}</label
        ><strong>{{ area.label }}</strong>
      </div>
      <div class="col-md-1 mt-4">
        <label class="label d-block">{{ content.locations }}</label
        ><strong>{{ area.location_count | number }}</strong>
      </div>
    </div>
  </nb-card-body>
</nb-card>

Ts

sortIconLabel: any = "dash";
sortValue: any;
sortIconlocation: any = "dash";
sortOrderBy: any;


changeOrder(field, field_value): void {
 
  this.sortOrderBy = field;
  this.sortValue = field_value;

if (field_value == "label") {
  this.sortIconLabel = this.sortIconLabel == "asc" ? "desc" : "asc";
}

  if (field_value == "locations") {
    this.sortIconlocation= this.sortIconlocation== "asc" ? "desc" : "asc";
  }
}

Custom Pipe

import { Injectable, Pipe, PipeTransform } from '@angular/core';

export type SortOrder = 'asc' | 'desc' | 'dash';

  @Injectable()
  @Pipe({
   name: 'sortOrder',
})
export class SortpipeDirective implements PipeTransform {
      transform(value: any[], sortOrder: SortOrder | string = 'asc', sortKey?: string): any {
      sortOrder = sortOrder && (sortOrder.toLowerCase() as any);

     if (!value || (sortOrder === 'dash' )) return value;

     let numberArray = [];
     let stringArray = [];

     if (!sortKey) {
       numberArray = value.filter(item => typeof item === 'number').sort();
       stringArray = value.filter(item => typeof item === 'string').sort();
    } else {
    numberArray = value.filter(item => typeof item[sortKey] === 'number').sort((a, b) => a[sortKey] - b[sortKey]);
    stringArray = value
     .filter(item => typeof item[sortKey] === 'string')
     .sort((a, b) => {
       if (a[sortKey] < b[sortKey]) return -1;
       else if (a[sortKey] > b[sortKey]) return 1;
       else return 0;
     });
  }
  const sorted = [
   ...numberArray,
   ...stringArray,
   ...value.filter(
     item =>
       typeof (sortKey ? item[sortKey] : item) !== 'number' &&
       typeof (sortKey ? item[sortKey] : item) !== 'string',
    ),
   ];
   return sortOrder === 'asc' ? sorted : sorted.reverse();
  }
}

question from:https://stackoverflow.com/questions/65896545/sorting-custom-pipe-in-angular-with-up-down-img-and-by-default-res-list-with

Answer 1

Waitting for answers