How to refresh previous page after current page closes in OnSen and Angular 2+

Question

I have a product-list page where I show list of all products. From this page there is link to open on product-new page where I add new product. After adding the product in DB I want to show newly added product in my previous product-list page after current product-new page is closed. I could not find any solution to pass newly added product back to previous page or refresh it to reload product list. Could you please help me with this.

Answer 1

No angular specific code is necessary for refreshing the page. location.reload() will do the trick.

That being said, doing a page refresh here would be a bad idea. Not only could there be a significant delay for the user, but a page reset wipes out the entire front end state. This means that any functionality implemented via angular gets set back to default on a page reload. For the reason, when doing font-end development using a client-side library such as angular or react, we want to avoid reloading the page at all costs.

Instead, you should develop a client-side solution to show your new product after the user submits it to the database. You already have all of the information locally (because you just submitted it!), there's no reason you have to query the database again to get it back.

let products = [];

// Pretend this is the product that we're adding
let product:Product = new Product('my favorite product');

sendToDb(product);
products.add(product);

Let's assume product looks like this:

class Product {
  name:string

  constructor(name:string) {
    this.name = name;
  }
}

Then on your view:

<ul *ngFor="let products of product">
  <li>{{product.name}}</li>
</ul>

If you structure your code like this, then the new product will appear in the UI automatically and you won't have to do a screen refresh in the first place.

Answer 2

nmg49 - Thank you for your help. Yes thats the way to talk between 2 components in Angular, but in OnSen I think its little different. Please correct me if I am wrong.

Anyways I managed to achieve what i wanted. This might not be best practice or right way of doing that, but I will stick with it till I find a better solution.

From my product-new component, I replaced it with product-list page rather than just poping it. Doing so new product-list will be created on top of the stack with fresh data. But then there will be 2 product-list in the stack back to back. Top on with refreshed data, 2nd top with old data. Now delete the 2nd top product-list from stack and your are good now.

Below is my code.

this.navi.nativeElement.replacePage(ProductListPageComponent,{slide:'left'}); this.navi.nativeElement.removePage(1); // 1 represents the index of the previous ProductListPageComponent, this will be different in your case.

Please let me know know if there is a better way of doing that.