Load tab contents from differnt tabs


I have 4 tabs in my app, an action inside tab1 should update(calls a service) the content of tab1 and tab4,
an action in tab4 will update (calls a service) the content of tab 2 and 3 as well as the badges of tab 2 and 3.

How would I go about updating content of other tabs from different tabs and update the actual tabs.html (badges)

Thank you

Passing parameters between child tabs

This is pretty intricate, so instead of pointing you to 5 different articles, each of which is very long, I’ll walk you through step by step.

You need a global data provider. When you create providers, you can use them globally, locally, or in a hybrid mess … check out Josh Morony’s blog if you want to learn more. We’re going pure global.

ionic generate provider MyData

In src > app > app.module.ts, you need to…

import { MyData } from '../../providers/my-data';

…and then add it to the array of providers…

providers: [MyData,
      {provide: ErrorHandler, useClass: IonicErrorHandler}]

Let’s build my-data.ts. I’ve made a few public variables. This will give you an idea of how to use it. You have lots more code to add from here :slight_smile:

export class MyData {

    public _aboutCount: number;
    public _contactCount: number;
    public _homeCount: number;

    constructor(public http: Http) {
        this._aboutCount = 1;
        this._contactCount = 2;
        this._homeCount = 3;


Any time you want a class to access MyData, you simply need to import it into the *.ts file and inject it into the class constructor…

This is what that looks like for tabs.ts

import { MyData } from '../../providers/my-data';


constructor(public _myData: MyData) {


And using it within tabs.html for your badges, you have…

    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home" [tabBadge]=this._myData._homeCount></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle" [tabBadge]=this._myData._aboutCount></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts" [tabBadge]=this._myData._contactCount></ion-tab>

Keep in mind, you can do more than just read MyData’s values. You’re binding directly to them, so whenever any class changes a value, it’s updated for every other class.



I had most of that in place but now can do the rest, thank you, will try it and see if I have any further questions, thanks again