Searchbar on firebase dataset


Hi everyone,

I need help for filtering a dataset provided by my firebase database. I use AngularFire2 to get my data (see my provider at the end of this post) in a Observable<any[]>;

Next, i added a searchbar to filtering my dataset but the code below doesn’t work. I can retrieve the good filtered data but my Observable<any[]> doesn’t refresh…It works well on type any[] but in my case my dataset must be a Observable<any[]>


  <ion-navbar color="maintheme">
  <ion-searchbar class="searchbar" (ionInput)="onSearch($event)"></ion-searchbar>

<ion-content class="window">
    <ion-card *ngFor="let item of items | async ; let idx=index">
      <ion-card-header class="cardHeader" no-padding>
        <ion-item class="leftPadding" no-lines no-padding>


export class HomePage implements OnInit{

   items: Observable<any[]>;

 constructor(public navCtrl: NavController,
    public dataService: DataProvider, 
    public loadingCtrl: LoadingController,
    public alertCtrl: AlertController,
    private authService: AuthProvider) {

ngOnInit(){ ... }

   * Refresh dataset
    const loading = this.loadingCtrl.create({content: 'Loading please wait...'});
      this.items= this.dataService.fetchData();
      this.items.subscribe(res => {
      error => {
    } catch(err){

onSearch(ev: any){
    // set searchText to the value of the searchbar
    var searchText =;
    // Avoid research if searchtext is empty
    if (!searchText || searchText.trim() === '') {

    // Filtering on the attribute 'title'
    this.items= this.items.filter((v) => {
      v.forEach(element => {
        if (element.title.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1) {
          console.log('add ' + element.title);   // Here, the filtered item is good
          return true;
      return false;

My data provider

import { AngularFireAuth } from 'angularfire2/auth';
import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import { ToolProvider } from '../tool/tool';

export class DataProvider {

  itemList: AngularFireList<any>;
  items: Observable<any[]>;

  constructor(public afDB: AngularFireDatabase, private tool: ToolProvider, private afAuth: AngularFireAuth) {
      // some stuff here

      this.itemList = this.afDB.list('/items/'+this.user, ref => ref.orderByChild('type'));
      this.items= this.itemList.valueChanges().map(items => items.sort(this.tool.predicateBy("title")));
      return this.items;  
    } catch(err){
      this.items= null;

Thank you all



Have you solved this issue?


Struggling with the same thing. About to conclude it is impossible to filter Observables. I tried to put the retrieved data into an array and filter that but that was also unsuccessful. A lot of issues… if anybody has any solution, please share