Load tab contents from differnt tabs

Ionic Framework ionic-v3
1

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

2

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-tabs>
    <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>
</ion-tabs>

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.

Ryan

3

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