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. 