Hiding ion-item-divider depending on length of piped array

[ismailpatel]

Does anyone know how I can hide ion-item-divider when you are filtering and that group has no matching items?

Right now I am using Ionic 2 and using pipes to filter down ionic-items depending on the value of the search input.
In the screen shot, you cans see that “primary group” and “secondary group” has no matching items and should be hidden.

<ion-item-group *ngFor="let group of (groups)">
      <ion-item-divider color="light">{{ group.groupName }}</ion-item-divider>
      <button ion-item *ngFor="let item of (group.items) | myfilter:{arg1:searchText, arg2:showFavourite}"(click)="detail(item)">
        <h2>{{ item.name }}</h2>
      </button>
 </ion-item-group>

[rapropos]

I would recommend ditching the pipe and doing the filtering in the controller. Not only will it be more efficient in general, but also make the problem you are asking about become trivial.

[ismailpatel]

I have done what you have recommended. The original issue that put me to pipes was dealing with filtering multidimensional arrays. A fresh day later, I managed to use forEach to loop through each group and filter once inside. Not sure why I didn’t think of it before.

I then use a simple *ngIf=“groups.items.length” to hide the group titles when they are no items to show.

You are right it being more efficient.

Thanks for your help.