title: Array Items Filtering Ionic 3
body: <p>I have implemented array list. It is populated from fire-base. I want to search through that list. When the page is loaded first time, It do not display any listed item. But if I type something on search input then it shows the list items. I tried ngZone but it did not work, here I will give you full source code. </p>
  
  <p><strong>NOTE : after input something on search always display items, but initially empty</strong></p>
  
  <p><a href="https://i.stack.imgur.com/y5Q9k.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y5Q9k.gif" alt="Here is the problem exactly what i have"></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ion-content padding&gt;    
      &lt;ion-searchbar [(ngModel)]="searchTerm" [formControl]="searchControl" (ionInput)="onSearchInput()"&gt;&lt;/ion-searchbar&gt;
  
      &lt;div *ngIf="searching" class="spinner-container"&gt;
          &lt;ion-spinner&gt;&lt;/ion-spinner&gt;
      &lt;/div&gt;
  
      &lt;ion-list&gt;
          &lt;ion-item *ngFor="let item of items"&gt;
              {{item.client_meeting_schedule_client_name}}
          &lt;/ion-item&gt;
      &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>DONE_TASK.ts</strong></p>
  
  <pre><code>export class DoneTasksPage {
  
    searchTerm: string = '';
    searchControl: FormControl;
    items: any;
    searching: any = false;
  
    constructor(public navCtrl: NavController, public oDataListProvider: DataListProvider, private oNgZone: NgZone) {
      this.searchControl = new FormControl();
    }
  
    ionViewDidLoad() {
      this.setFilteredItems();
      this.searchControl.valueChanges.debounceTime(700).subscribe(search =&gt; {
        this.searching = false;
        this.setFilteredItems();
      });
    }
  
    onSearchInput() {
      this.searching = true;
    }
  
    setFilteredItems() {
      this.oNgZone.run(() =&gt; {
        this.items = this.oDataListProvider.filterItems(this.searchTerm);
      })
    }
  
  }
  </code></pre>
  
  <p><strong>DATA_LIST_PROVIDER</strong></p>
  
  <pre><code>export class DataListProvider {
  
  
    items = [];
    public ClientSchedules: Array&lt;any&gt; = [];
    clientSchedulesRef: any;
    whereClause: string;
  
    constructor(private oAngularFireDatabase: AngularFireDatabase, private oNgZone: NgZone) {
  
      this.whereClause = "true_false_true_false";
  
      //Client schedule node refference
      this.clientSchedulesRef = this.oAngularFireDatabase.database.ref('/Client_meeting_schedule').orderByChild("client_meeting_schedule_valid_status").equalTo(this.whereClause);
      //Above sequence of equal IsActive true / IsDelete false / IsDone true / IsNotDone false
  
      this.clientSchedulesRef.on('value', client_Schedules_Snapshot =&gt; {
        this.oNgZone.run(() =&gt; {
          // Here we'll work with the list
          client_Schedules_Snapshot.forEach(clientsSheduleSnap =&gt; { 
            this.items.push(clientsSheduleSnap.val());
          });
        });
      });
    }
  
    filterItems(searchTerm) {
      return this.items.filter((item) =&gt; {
          return item.client_meeting_schedule_client_name.toLowerCase().indexOf(searchTerm.toLowerCase()) &gt; -1;
      });
    }
  
  }
  </code></pre>