I have a requirement where I have refresh the contents of the current page onclick of the refresh button in the current page.I went through few websites but I am not quite clear about this functionality.Could anyone suggest me how to do this?
-
1Can yopu add your code and what you have tried so far?Madhu Ranjan– Madhu Ranjan2017-04-28 14:35:04 +00:00Commented Apr 28, 2017 at 14:35
-
post your code and be more specific. What do you need to reload? Is it the content of the page? In this page do you make and api call or something like this? Use a refresher, it's better, it's cleaner, has a better UX.Gabriel Barreto– Gabriel Barreto2017-04-28 15:17:26 +00:00Commented Apr 28, 2017 at 15:17
4 Answers
Onclick of your refresh button, you could call the page event method ionViewWillEnter()
From the official docs --> ionViewWillEnter() Runs when the page is about to enter and become the active page.
HTML
<button (click)="refreshPage()">Refresh Page</button>
Typescript
ionViewWillEnter(){
this.myDefaultMethodToFetchData();
}
refreshPage() {
this.ionViewWillEnter();
}
myDefaultMethodToFetchData(){
...Do Something, when the page opens...
}
1 Comment
This will work!!! Give this under the function that's called on button click event.
this.navCtrl.setRoot(this.navCtrl.getActive().component);
or
Use the ionViewWillEnter lifecycle event on your page. You can put the correct code in that method to refresh all the necessary things on your page. https://ionicframework.com/docs/api/navigation/NavController/
Comments
Add this in the constructor and just replace your page name
this.navigationSubscription = this.router.events.subscribe((e: any) => {
if (e instanceof NavigationEnd && e.url === '/page-name' && localStorage.getItem('prevUrl') === '/page-name') {
this.ionViewWillEnter();
this.ngOnInit
}
});