How to update badge in ion-tabs

Ionic Framework
1

I’ d like to update an using Observables in Typescript, but it does not update. I ran many tests, and the console.log is ok and the variable is updating but not the badge.

I used cordova-fcm and the notification has been showed

Here my code:

    import { Component } from '@angular/core';
    import { FCM } from '@ionic-native/fcm/ngx';
    import { ApiService} from "../api.service";
    import{ToastController} from "@ionic/angular";
    import {observable, Observable} from "rxjs";

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
    export class TabsPage {
  notification:number = 0;
  notification_color = "primary";
  constructor(private fcm:FCM, private api:ApiService, private toast:ToastController,) {
   if(('auth' in localStorage)){
     this.fcm.onTokenRefresh().subscribe(data=>{
       this.api.postRequest('/user/setNotificationToken',JSON.stringify({token: data})).then(json=>{
         // @ts-ignore
         if(!json.ok){
           this.presentToast('Si è verificato un errore durante l\'aggiornamento del tuo token di sicurezza')
         }
       })
     })
   }

   let notificationObserve = new Observable((observe)=>{
     let notification:number = 0;
     this.fcm.onNotification().subscribe(data=>{
       this.presentToast(data.body);
       console.log("NOTIFICATION EVENT FIRED");
       observe.next(notification+1);
     })
   })

    notificationObserve.subscribe({
      next(notificationNumber){
        this.notification = notificationNumber;
        console.log("NOTIFICATION EVENT FIRED", this.notification);
      }
    })
  }
  async presentToast(message){
    let t = await this.toast.create({
      message,
      position:'top',
      duration:2000,
      animated:true
    })
    return await t.present();
  }

  resetNotifications(){
    this.notification = 0;
    this.notification_color = "primary";
  }
}
2

Finally I found the solutions:

JUST DELETE WHAT I WROTE BEFORE AND:
generate a new service (ionic g service global), then import that in your app.module.ts in the provides array,

in your global.service.ts:

import { Injectable, NgZone } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GlobalService {
  notification:number = 0;
  constructor(private ngZone:NgZone) { }

  updateNotifications(){
    this.ngZone.run(()=>{
      this.notification +=1;
    })
  }

  resetNotifications(){
    this.ngZone.run(()=>{
      this.notification = 0;
    })
  }
}

That’s all. Import that service where you need to.