When a user performs a search, they receive a list of items matching their query. I am struggling to figure out how to sort this list by the lowest number of ingredients included in each item. For example, if I search for "potato" and "leek," I want the items with the lowest number of total ingredients to be listed first.
My Ion-list currently looks like this:
<ion-list>
<ion-item *ngFor="let item of recipes" (click)="goToDetails(item.id)">
<div class="thumb">
<img src="{{item.smallImageUrls}}">
</div>
<div class="item-text">
<div class="inner">
<div class="title">
<h1>{{item.recipeName}}</h1>
</div>
<div class="rating">
<rating [(ngModel)]="item.rating"></rating>
</div>
<div class="time">
<p>{{item.totalTimeInSeconds | HoursMinutesSeconds}} minutes</p>
</div>
<div class="ingredients">
<p>{{item.ingredients.length}} Ingredients</p>
</div>
</div>
</div>
</ion-item>
</ion-list>
I am looking to implement a sorting mechanism based on the
item.ingredients.length
to automatically arrange the entire list from low to high.