I'm currently developing an Ionic app that features a "home" page with 3 tabs. My goal is to implement a search bar for these tabs by triggering a method inside the selected tab's class whenever the search term changes. Below is the structure of the home page:
<ion-header>
<ion-navbar>
<ion-title>{{title}}</ion-title>
<ion-buttons end>
<button [hidden]="title != 'Meu Cadastro'" ion-button color="dark" (click)="logout()">
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-toolbar>
<ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredItems()"></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-tabs #homeTabs>
<ion-tab [root]="tabAten" tabTitle="Atendimentos" [rootParams]="innerInstance" tabIcon="construct"></ion-tab>
<ion-tab [root]="tabEquip" tabTitle="Equipamentos" [rootParams]="innerInstance" tabIcon="build"></ion-tab>
<ion-tab [root]="tabCad" tabTitle="Meu Cadastro" [rootParams]="innerInstance" tabIcon="contact"></ion-tab>
</ion-tabs>
</ion-content>
import { Component, ViewChild } from '@angular/core';
import { NavController, AlertController, Tabs } from 'ionic-angular';
import { NativePageTransitions, NativeTransitionOptions } from "@ionic-native/native-page-transitions";
import { AtendimentosPage } from "../home/atendimentos/atendimentos";
import { EquipamentosPage } from "../home/equipamentos/equipamentos";
import { MeuCadastroPage } from "../home/meu_cadastro/meu_cadastro";
var instance: any;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
title: String;
@ViewChild('homeTabs') tabs: Tabs;
tabAten: any;
tabEquip: any;
tabCad: any;
searchTerm: string = '';
innerInstance: any;
constructor(public navCtrl: NavController
, private alertCtrl: AlertController
, private nativePageTransitions: NativePageTransitions) {
instance = this;
this.innerInstance = this;
this.tabAten = AtendimentosPage;
this.tabEquip = EquipamentosPage;
this.tabCad = MeuCadastroPage;
}
setTitle(title: String) {
this.title = title;
}
setFilteredItems() {
switch (this.tabs._getSelectedTabIndex()) {
//THIS is where I'm trying to call the method inside the 1st tab. The setFilteredItems() method is called whenever the search bar receives new text from the user.
case 0: this.tabAten.filterItems(this.searchTerm);
break;
case 1: this.tabEquip.filterItems(this.searchTerm);
break;
default: break;
}
}
Now let's take a look at the tab class:
<ion-content>
<ion-list>
<ion-item *ngFor="let a of atendimentos; let i = index" (click)="showDetails(i)">
<div *ngIf="a.status != 'Concluído'">
<!-- This is where data for each list item is displayed -->
</div>
</ion-item>
</ion-list>
</ion-content>
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AtendimentoPage } from "../atendimentos/atendimento/atendimento";
import { Atendimento } from "../../../models/atendimento";
@Component({
selector: 'page-home',
templateUrl: 'atendimentos.html'
})
export class AtendimentosPage {
options: NativeTransitionOptions;
atendimentos: Array<Atendimento>;
homeInstance: any;
ionViewWillEnter() {
this.homeInstance.setTitle("Atendimentos");
}
constructor(public navCtrl: NavController
, private navParams: NavParams
, private http: Http
, private nativePageTransitions: NativePageTransitions) {
this.homeInstance = navParams.data;
this.atendimentos = new Array<Atendimento>();
this.getAtendimentos(); // Method that does a web call to get array of objects, those will be filtered by the search bar.
}
public filterItems(searchTerm) {
//THIS is the method that I want to call from the home page.
}
}
When setting up the tabs on my home page, each one is assigned a corresponding class in the home page constructor. The template already recognizes these as tab roots. How can I access the specific class instance of the selected tab/page and utilize its methods?