get updated data after edting and redirect to another route

Question

In have two Angular 6 Components: DetailsProduct and EditProduct. When I edit a product, I'm redirected to the page of the Details about the product. My problem is, when I go back to Details, the new data I have saved are not showing, old data are. Here is the code of EditProduct:

EditProduct() {

    let url = this.baseUrl + `/products/${this.id}`;
    this.httpClient.put(url, JSON.stringify(query), httpOptions).subscribe(
        response => {console.log(response); this.successMessage = true;},
        err => { console.log(err);  this.errorMessage = true;}
    );
    this.goToDetails();
}

goToDetails() {
    this.router.navigate(['details-product/'+this.id]); 
}

Here is the code of DetailsProduct:

getProductDetails() {
    let url = this.baseUrl + `/products/${this.id}`
    this.httpClient.get(url)
        .subscribe(data => { this.oneProduct= data; })
}

This is what I have in the routing module:

const routes: Routes = [
  { path: 'products', component: ProductsComponent },
  { path: 'details-product/:id', component: DetailsProductComponent},

]

Any Idea how to get the new saved data (get the updated data ) after redirection to details ? I could not find something that works for me in other topics ...

I run into this topic about Resolver but Could not get it right. Any help is very appreciated.

I used a resolver but did not make any change.

Answer 1

The solution is:

EditProduct() {

    let url = this.baseUrl + `/products/${this.id}`;
    this.httpClient.put(url, JSON.stringify(query), httpOptions).subscribe(
        response => {
              this.goToDetails();
              console.log(response); this.successMessage = true;},
        err => { console.log(err);  this.errorMessage = true;}
    );

}

Its calling the redirection method inside subscribe. So simple.