How do make ionic app detect change when update is made?

Good day house, please I need your help, I noticed that my ionic app doesn’t detect change when an update is made. I have a profile page that displays authenticated users data from an api( i.e username and email). Also, a profile_edit page that updates user data. But I noticed that when I update user data and navigate to the profile page, the change doesn’t reflect on the profile page unless I navigate to another page and back before it detects the change. I tried using BehaviourSubject but I don’t really know how to implement it. I have spent days on this, please I need your assistance. Thanks. My code below

  public  customerData: any

  constructor ( WC: WoocommerceService) {

  ngOnInit() {

// this retrieve authenticated user id
    this.isUserLoggedIn = localStorage.getItem('currentUserId');

// this retrieve user data  from an api call

      this.customerData = data;  




 <ion-col size="12">
    <ion-label *ngIf="customerData" class="ion-text-center">
      <p>{{ customerData.first_name}} {{ customerData.last_name}}</p>

woocommerce service page

export class WoocommerceService {

 private authenticationState = new BehaviorSubject<any>([]);
  data = this.authenticationState.asObservable();

//getting authenticated users details from woocommerce


  this.apiUrl = `${this.siteUrl}${this.woocommercePath}customers/${id}?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;

  console.log('API url for retrive customer: ', this.apiUrl);

  this.customerData = this.http.get(this.apiUrl);


   return this.customerData;


// this update user data
updateCustomerData(id, customerDataUpdated){

  let headers = new HttpHeaders ({

    "Content-Type" : "application/json"


  this.apiUrl = `${this.siteUrl}${this.woocommercePath}customers/${id}?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;

 // console.log('API url for retrive customer data: ', this.apiUrl);

  return new Promise((resolve, reject) => {

    this.http.put(this.apiUrl, customerDataUpdated, {headers} ).subscribe(

      response => {


        console.log('Customer Data Updated: ', response);

    error => {


     console.log('Customer Data Updated failed ', error);





Please read this post which covers the fundamental issue you’re having here and introduces the watch/peek/poke idiom I like to deploy in situations like this. You do not want to be manually instantiating Promises, read this for more on HttpParams which are a safer and more readable way to deal with query strings than what you currently have.

export interface Customer {
  id: string;
  last_name: string;
  first_name: string;
  email: string;

import {isString, isObjectLike} from "lodash-es";

class CustomerService {
  private customer$ = new BehaviorSubject<Customer | undefined>(undefined);
  private apiParams = new HttpParams();

  constructor(private http: Http, private storage: Storage) {
      .then(() =>"custid"))
      .then(cust => this.customer$.next(cust));
    this.apiParams = this.apiParams.set("consumer_key", WHATEVER_GOES_HERE);
    this.apiParams = this.apiParams.set("consumer_secret", MORE_WHATEVER);

  private customerUrl(custid: string): string {
    return `${SITE_URL}${WOOCOMMERCE_PATH}customers/${id}`;

  peekCustomer(): Customer | undefined {
    return this.customer$.value;

  watchCustomer(): Observable<Customer | undefined> {
    return this.customer$; 

  pokeCustomer(cust: Customer | string | undefined): Observable<Customer | undefined> {
    if (isString(cust)) {
      // retargeting new customer id"custid", cust);
      return this.http.get(this.customerUrl(cust), {params: this.apiParams})
        .pipe(tap(custo => this.customer$.next(custo));
    } else if (isObjectLike(cust)) {
      // updating existing customer
      return this.http.put(this.customerUrl(, cust, {params: this.apiParams})
        .pipe(map(() => cust), tap((custo) => this.customer$.next(custo));
    } else {
      // clearing"custid");
      return of(undefined);