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

Ionic Framework Ionic Angular
1

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

profile.page.ts

  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.WC.getUserInfo(this.isUserLoggedIn).subscribe((data)=>{

      this.customerData = data;  

    });

  }

profile.html

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

woocommerce service page

export class WoocommerceService {

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

//getting authenticated users details from woocommerce

getUserInfo(id){

  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);

 // STORE WHATEVER DATA YOU WANT IN THE SUBJECT 

   this.authenticationState.next(this.customerData);

   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 => {

        resolve(response);

        this.authenticationState.next(this.customerData);

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

    error => {

      resolve(error);

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

    }

    )

  });

}
}
2

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) {
    this.storage.ready()
      .then(() => this.storage.get("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
      this.storage.set("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.id), cust, {params: this.apiParams})
        .pipe(map(() => cust), tap((custo) => this.customer$.next(custo));
    } else {
      // clearing
      this.storage.remove("custid");
      this.customer$.next(undefined);
      return of(undefined);
    }
  }
}