virtualScroll with Custom Pipe Search

this is my virtual scroll

 <ion-list [virtualScroll]=" data | productFilterByName : productFilter  ">
      <ion-item-sliding *virtualItem="let article">
      <ion-item >
        <ion-row>
          <ion-col class="center" (click)="goToProductPage($event, article)">
            {{article.name}}
          </ion-col>
          <ion-col class="center" (click)="goToProductPage($event, article)">
            {{article.feature}}
          </ion-col>
          <ion-col class="center" (click)="goToProductPage($event, article)">
            {{article.price | currency:'TND':true:'1.3-3' }}
          </ion-col>
        </ion-row>
      </ion-item>
      <ion-item-options side="right">
      <button ion-button color="secondary" (click)="showMeProductDetails($event,article)">Details</button>
    </ion-item-options>
      </ion-item-sliding>
    </ion-list>

i had a search bar at the same page:

  <ion-toolbar  no-border-top>
    <ion-searchbar  color="primary"
                   [(ngModel)]="productFilter"
                   placeholder="Search">
    </ion-searchbar>
  </ion-toolbar>

this is the custom Pipe

import { PipeTransform,Pipe } from '@angular/core';
import { IProduct } from './page1';
@Pipe({
    name:'productFilterByName'
})
export class ProductFilterPipe implements PipeTransform {
    transform (value :IProduct[], filterBy: string):IProduct[]
    {
         filterBy = filterBy? filterBy.toLocaleUpperCase():null;
         return  filterBy ? value.filter((product: IProduct)=>
            product.name.toLocaleUpperCase().indexOf(filterBy)!== -1): value;
            }
}

when i do the search. it will show me the result perfectly. but if i delete the caracters in the search. the list contain only 4 items.

this is how the virtual scroll show up :

image

this is how the list appear when i do search:

image

if i remove what the search bar contains to go back to the first step. this is how virtual scroll behave

image

How I can resolve this problem.
thank you in advance

There are currently several issues open on github, relating VirtualScroll. Iā€™m struggling with those issues myself.

1 Like