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,

tabs.html

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

            <ion-tab-button tab="home">
                <ion-label>Home</ion-label>
            </ion-tab-button>

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

        </ion-tab-bar>
    </ion-tabs>

tabs.ts

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

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

    constructor( global: GloballService ) {
        this.global =  global;
    }

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

}

globall.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class GloballService {
    public cartCountTotal: any;
    public cart_length : any;

    constructor(private storage : Storage,) {  }

    async cartCount(){
        let cart_array = await this.storage.get("cart_array");
        console.log("cart_array.data.length",cart_array.data.length);
        this.cart_length = cart_array.data.length;

        return cart_array.data.length;
    }

    async ionViewWillLoad() {
        await this.storage.create();
    }
}

products.ts

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 {
    constructor( 
        public http: HttpClient, 
        public navCtrl: NavController,
        private router: Router,
        private platform : Platform,
        private splashScreen: SplashScreen,
        private storage : Storage,
        global: GloballService, 
    ) {
        this.global =  global;
        this.baseUrl = this.global.baseUrl;
    }

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

   


}

Please help me to find out solution.

2 posts - 2 participants

Read full topic