title: Turn static array search into an observable search
body: <p>I have an question I cant figure it out..</p>
  
  <p>I have this function which works fine on my static array but now I want to turn this into a search in my obseravble.</p>
  
  <p>This is my searchbar in home.html:</p>
  
  <pre><code>&lt;ion-searchbar [(ngModel)]="searchKey" [formControl]="searchControl" (ionInput)="onInput($event)" (ionCancel)="onCancel($event)"&gt;&lt;/ion-searchbar&gt;
  </code></pre>
  
  <p>And here is the home.ts:</p>
  
  <pre><code>export class HomePage {
  
     searchControl: FormControl;
     searching: any = false;
     restaurantsList: Observable&lt;any[]&gt;;
  
     constructor(){
         this.restaurantsList = this.restaurantService.getRestaurantList();
         this.searchControl = new FormControl();
     }      
  
     ionViewDidLoad(){
        this.searchControl.valueChanges.debounceTime(700).subscribe(search =&gt; {  
           this.searching = false;
           this.setFilteredItems();
       });
      }
      setFilteredItems(){
         this.restaurantService.filterRestaurants(this.searchKey).subscribe(
             foundRestaurant =&gt; this.restaurantsList = foundRestaurant
         )
  
         console.log(this.restaurantService.filterRestaurants(this.searchKey));
       }
  
       onInput(event) {
          this.searching = true;
       }
  </code></pre>
  
  <p>And this is the restaurant-service.ts:</p>
  
  <pre><code>export class RestaurantService {
  
    restaurantsRef: AngularFireList&lt;any&gt;;
    restaurantsList: Observable&lt;any[]&gt;;
  
    constructor(
        public afDb: AngularFireDatabase
    ) {
        this.restaurantsRef = afDb.list('/restaurants');
        this.restaurantsList = this.restaurantsRef.valueChanges();
    }
  
     getRestaurantList() {
        return this.restaurantsList;
     }
  
      filterRestaurants(searchKey: string) {
         let key: string = searchKey.toUpperCase();
  
         return this.restaurantsList.map(
             restaurantsList =&gt; restaurantsList.filter(
                restaurant =&gt; [
                  restaurant.title.toUpperCase(),
                  restaurant.address.toUpperCase(),
                  restaurant.city.toUpperCase(),
                  restaurant.description.toUpperCase()
              ].join(' ').indexOf(key) &gt; -1)
         );
      }
  }
  </code></pre>
  
  <p>But in the <code>setFilteredItems()</code> method the ide says on <code>this.restaurantList</code>:
  <code>Type boolean is not assignable to type Observable&lt;any[]&gt;</code></p>
  
  <p>Does anyone know the solution to change the restaurantList to the filteredItems?</p>
  
  <p>FYI I followed this tutorial: <a href="https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/" rel="nofollow noreferrer">LINK</a></p>