How to sort the data when user click on sort button

tutorials
1

Hi,

I have ionic 4 app and want to sort(both ascendin and descending order based on price) ion list tems when user click on sort icon…is there any way that I can do it from front end or do I need to again call my service api to sort the data and render it again on UI?

2

Show your code. You only attach your variable with an *ngFor. On click of a button, you sort the content inside the variable holding it. This way, your content gets refreshed automatically since it’s binded.

3

Hi , Can you brief it… Below is my code…there are two icons added to enable user to perform ascending and descending order… What should I write in .ts file for sortAsc() and sortDesc()

<ion-list *ngIf=“list?.length!==0”>
<ion-item *ngFor=“let data of list” (click)=“geToDetail(data)”>

<div class="product-info">
  <p>{{ data.ProductName }}</p>
  <p>{{ data.ProductCode }}</p>
</div>

<ion-icon class="promotion-bookmark" name="ios-bookmark" *ngIf="data?.PromotionPrice!==0"></ion-icon>
<ion-icon class="member-bookmark" name="ios-bookmark" *ngIf="data?.MembershipPrice!=='NA'"></ion-icon>
<ion-icon class="both-bookmark" name="ios-bookmark" *ngIf="data?.MembershipPrice!=='NA' && data?.PromotionPrice!==0"></ion-icon>


<div class="product-price">
  <p class="price" *ngIf="data?.PromotionPrice===0">¥{{ data.RegularPrice }}</p>
  <p class="price" *ngIf="data?.PromotionPrice!==0">¥{{ data.PromotionPrice }}</p>
  <p class="stock">{{ data.OnHand }}</p>
  <p class="stock" *ngIf="data.OnHand !== 0">{{ 'search_list.in_stock'}}</p>
  <p class="stock" *ngIf="data.OnHand === 0">{{ 'search_list.out_of_stock'}}</p>
</div>
4

ok, can you show what data is inside list?