search.page.ts

import {Page, NavController} from "ionic-angular/index";
import {MerchantsService, IMerchant} from "../../services/merchants.service";
import {PeopleService} from "../../services/people.service";
import {Observable} from "rxjs/Observable";
import {MerchantPage} from "../merchant/merchant.page";
import {LoaderComponent} from "../../components/loader/loader.component";
import {SearchbarInput, Searchbar} from 'ionic-angular';
import {Component, Input} from "@angular/core";

@Page({
    templateUrl: 'build/pages/search/search.page.html',
    providers: [MerchantsService, PeopleService],
    directives: [LoaderComponent]
})

export class SearchPage {
    companyName:string = '';
    merchants:Observable<IMerchant[]>;
    searchActive:boolean = false;
    listLoading:boolean = true;


    constructor(private merchantsService:MerchantsService,
                private nav:NavController,
                private peopleService:PeopleService) {

      this.initializeItems();
    }

    loadingAnim() {
      this.merchants.then (()=> {
        this.searchActive = false;
      })

      this.searchActive = true;
    }

    initializeItems() {

      this.merchants = this.merchantsService.search('');

      this.loadingAnim();
    }

    onSearch(ev) {

        let val = ev.target.value;

        console.log("invoking search " + val)

        this.merchants = this.merchantsService.search(val);

        this.loadingAnim();

        console.log("invoked search and got results")
    }

    onCancel(ev) {
      console.log('onCancel was trigerred');
    }

    show(merchant:IMerchant) {
        console.log("selecting merchant")
        this.nav.push(MerchantPage, {merchant: merchant});
    }
}