Increase tabBadge Value with Click Event

Ionic Framework ionic-v3
1

Hello, guys!

I want to ask if it’s possible to add tabBadge value through click event.
Consider i have a tabs.ts

import {Page} from 'ionic-angular';
import {ListCardPage} from '../list-card/list-card';
import {ProfilePage} from '../profile/profile';
import {HomePage} from "../home/home";

@Page({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = ListCardPage;
  tab2Root: any = HomePage;
  tab3Root: any = ProfilePage;
}

and tabs.html

<ion-tabs>
  <ion-tab [root]="tab1Root" tabIcon="male"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="female" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="ios-ionic-outline"></ion-tab>
</ion-tabs>

How do i add value of tabBadge of tab2Root (female icon) from HomePage through click event ?
How do i affect the value of tabBadge from another page (which is HomePage) ?

If you guys don’t mind, too, please give me an example.
Thank you :slight_smile:

2

First you need bind directive

[tabBadge]=“countValue”

Then you just manipulate countValue in tabs.ts

In order to pass this value from another “page”, you need OUTPUT variable from another component/page. You can follow this instruction

https://toddmotto.com/component-events-event-emitter-output-angular-2

3

Thanks for your reply @zhengying

I successfully bind the value of tabBadge within the tabs.ts, but i still face the problem when i had to rewrite the value from another page.

I think this is because in the link you sent, the author use @Component (not @Page) decorator and directives. He can use data from CounterComponent with the help of directives in AppComponent.

I got confuse here, because i don’t know how to do that in Ionic. I try to use directives in the page i want to use the data from, which is TabsPage, but it didn’t work out.

How can i access data from TabsPage ?

4

@Page is a component, you can use directives and other mentioned in that link. I didn’t try. It should work

5

IMHO, virtually every situation where you want to modify instance variables or call methods of one page from another is a design flaw. If you need to share data (such as a settings page modifying user preferences that other pages rely on to render themselves), I think a mutually injected service is a much better choice.

1 Like
6

Hey guys @zhengying @rapropos

After i successfully update the value of tabBadge, it won’t change in real time. So, in order to update it visually, i had to navigate from other page to tabs Page.

Do you have any solution to update the value of tabBadge real time, so it affect the visual as well (like when i change the value of tabBadge, the visual is automatically updated) ?

Thanks

7

It’s hard to say exactly without seeing the code, but I’m guessing you have a stale variable somewhere. There are a bunch of ways to deal with this; the simplest is to not store whatever the thing is as a variable, but instead make it a function that delegates to the service every time.

8

Okay. So i have a tabs.ts (TabsPage) and tabs.html updated from the previous one.

tabs.ts

import {Page} from 'ionic-angular';
import {ListCardPage} from '../list-card/list-card';
import {ProfilePage} from '../profile/profile';
import {QuestListPage} from "../quest-list/quest-list";
import {ShareData} from '../../providers/share-data/share-data';


@Page({
  templateUrl: 'build/pages/tabs/tabs.html',
  selector: 'tabbe'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = ListCardPage;
  tab2Root: any = QuestListPage;
  tab3Root: any = ProfilePage;

  public countBadge = this.shareData.getMyValue();

  constructor(public shareData: ShareData) {}

  minusBadge() {
       this.shareData.decrementMyValue();
  }
}

tabs.html

<ion-tabs>
  <ion-tab [root]="tab1Root" tabIcon="male"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="female" [tabBadge]="countBadge" tabBadgeStyle="danger"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="ios-ionic-outline"></ion-tab>
</ion-tabs>

and i have ShareData service to channel the value to variable countBadge.

@Injectable()
export class ShareData {

    private _myValue = 0;

    getMyValue() {
        return this._myValue;
    }

    incrementMyValue(){
        this._myValue++;
    }

    decrementMyValue() {
        this._myValue--;
        return this._myValue;
    }

    setMyValue(heko) {
        this._myValue = heko;
        return heko;
    }

In this case, i want to trigger the change of value of countBadge in a page named QuestListPage when i open a modal.

import {Page, NavController, Modal} from 'ionic-angular';
import {TabsPage} from '../tabs/tabs';
import {ShareData} from '../../providers/share-data/share-data';
import {NotifDetailPage} from '../notif-detail/notif-detail';

@Page({
  templateUrl: 'build/pages/quest-list/quest-list.html',
})
export class QuestListPage {
    constructor(private nav: NavController, private shareData: ShareData) {
        this.nav = nav;
    }

openModal() {
    let modal = Modal.create(NotifDetailPage);
    this.nav.present(modal);
    this.shareData.incrementMyValue();
}

How do i update the change of countBadge visually as well ? Because i can only update the value, but not visually, so i have to refresh it first.

Is there a problem with my service and can you fix that ?
Thank you!

9

Exactly as I said, TabsPage.countBadge is stale. The simplest way to deal with it is to replace it with a function that calls shareData.getMyValue every time.

10

But, i did that in tabs.ts, right ?

This one ?

public countBadge = this.shareData.getMyValue();

What should i do with this one ?`

11

Once. At the time that TabsPage is constructed. TabsPage.countBadge never gets updated after that. Either you have to construct a way to make sure it is kept up to date or (simpler) don’t ever store it in the first place: simply call shareData.getMyValue whenever it is required. That is what I mean when I say “stale variable”.

12

By don’t ever store it in the first place, can i just assign tabBadge value in tabs.html to this.shareData.getMyValue() ?

I mean, i don’t use countBadge variable anymore.

so it will look like this

<ion-tab [root]="tab2Root" tabIcon="female" [tabBadge]="this.shareData.getMyValue()" tabBadgeStyle="danger"></ion-tab>

13

I got the solution

<ion-tab [root]="tab2Root" tabIcon="female" [tabBadge]="shareData.getMyValue()" 
tabBadgeStyle="danger"></ion-tab>