Is there a way to refresh only a page i.e. only one screen in ionic2.
I tried :
window.location.reload(); and
location.reload(); but it rebuilds the app .. is there a way to refresh only that page (particular screen).
Also tried:
<ion-input *ngIf="no_internet === 1" (click)="refresh($event)"></ion-input> in TypeScript:
refresh(refresher) { console.log('Begin async operation', refresher); setTimeout(() => { console.log('Async operation has ended'); refresher.complete(); }, 2000); } Try this code :
this.navCtrl.setRoot(this.navCtrl.getActive().component); 
You could also use the ionic refresher, to create a pull to refresh action on the page
http://ionicframework.com/docs/v2/api/components/refresher/Refresher/
I would do that : (based on @Ahmad Aghazadeh answer)
this.navCtrl.push(this.navCtrl.getActive().component).then(() => { let index = this.viewCtrl.index; this.navCtrl.remove(index); }) => Push this page once more (loading it again)
=> Remove the page we were on (using index)
ionViewWillEnter can be used to manage any preparation for the new loaded viewExample of using ion-refresher in an async function in ionic 3:
in your .html file:
<ion-content no-padding > <ion-refresher (ionRefresh)="doRefresh($event)"> <ion-refresher-content></ion-refresher-content> </ion-refresher> and in your .ts file:
constructor(...) { ... samplefuncion(null){ asyncFunction().then(()=>{ ...//after success call ... if (event) event.complete(); },(error)=>{ .... if (event) event.complete(); }) } doRefresh(event) { samplefuncion(event); } If you are willing to follow a common convention, I have found a very easy way to reload the current view (including all of its parameters). I tested this using Ionic3, but it should still apply in Ionic 2
Move all of your initialization code for every page into ionViewDidLoad(), which is run ONCE on the first time the view is loaded
import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { Api } from '../../providers/api'; import { Movie } from '../../interfaces/movie'; @Component({ selector: 'page-movie-info', templateUrl: 'movie-info.html' }) export class MovieInfoPage { constructor( public navCtrl: NavController, public navParams: NavParams, public api: Api ) { } /** * Run all page initialization in this method so that this page * can be refreshed simply by re-calling this function */ ionViewDidLoad() { //access any parameters provided to the page through navParams. var movieId = this.navParams.data.movieId; this.api.movies.getById(movieId).then((movie) => { this.movie = movie; }); } public movie: Movie; } From anywhere else in the app, you can reload the current view with this code
//get the currently active page component var component = this.navController.getActive().instance; //re-run the view load function if the page has one declared if (component.ionViewDidLoad) { component.ionViewDidLoad(); } Html:
<ion-refresher (ionRefresh)="doRefresh($event)"> <ion-refresher-content></ion-refresher-content> </ion-refresher> </ion-content> TypeScript :
@Component({...}) export class NewsFeedPage { doRefresh(refresher) { console.log('Begin async operation', refresher); setTimeout(() => { console.log('Async operation has ended'); refresher.complete(); }, 2000); } } source : Ionic doc
Try this, just pop one page and then push that page again.
this.navCtrl.pop(); this.navCtrl.push(NewPage); Hope this will help.
Try this: $window.location.reload(); $route.reload() use to reload route.
if you are using $stateProvider : $state.go($state.current, {}, {reload: true});
or
var currentPageTemplate = $route.current.templateUrl; $templateCache.remove(currentPageTemplate); $route.reload(); 