How to update tab data externally in ionic

How to change tab’s data while we’d some event occur in particular page. for example, I have app, in this, i have tab called CART, The problem is that, while I add some product in cart , then I need to increase CART (1), if add 2nd then tab rename with CART (2). I had used global service, but not works.

in sort, how to update tab data from external file in ionic. ( event, I can get update counts here, but on reload app, not realtime.

here is sample code,


        <ion-tab-bar slot="bottom">

            <ion-tab-button tab="home">

            <ion-tab-button tab="cart">
                <ion-label>Cart ({{cart_length}})</ion-label>



import { GloballService } from "../globall.service";

export class TabPage implements OnInit {
    cart_length :any = "";

    constructor( global: GloballService ) { =  global;

    async ionViewWillLoad() {
        this.cart_length = await;
// i can get update counts here, but on reload app, not realtime.



import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

  providedIn: 'root'
export class GloballService {
    public cartCountTotal: any;
    public cart_length : any;

    constructor(private storage : Storage,) {  }

    async cartCount(){
        let cart_array = await"cart_array");
        this.cart_length =;


    async ionViewWillLoad() {


import { Component, OnInit } from '@angular/core';
import { NavController,Platform } from '@ionic/angular';
import { HttpClient } from '@angular/common/http';
import { Observable } from "rxjs";
import { ActivatedRoute, Router, NavigationExtras } from '@angular/router';
import { CommonModule } from '@angular/common';
import { GloballService } from "../globall.service";
import { Storage } from '@ionic/storage';

export class Tab1Page {
        public http: HttpClient, 
        public navCtrl: NavController,
        private router: Router,
        private platform : Platform,
        private splashScreen: SplashScreen,
        private storage : Storage,
        global: GloballService, 
    ) { =  global;
        this.baseUrl =;

        this.data1 = '[{"master_id": 1588, "stock": "1", "price": "130"}]';"cart_array",this.data1);
// storing this for getting in globall.ts, 



Please help me to find out solution. :pray:

You need to utilize rxjs and it’s subjects in your service. Then on the pages that will use that subject, subscribe to those subjects to listen for updates. Subjects - Learn RxJS