How to reload page every time click on tabs?

My problem is when i click on first tab then page reload but when i click second time on same tab means first tab that time page not reload

so i want to give me solution that every time page should reload

please help me


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.



Thank you so much @MattE

It works for me

Hi @MattE my view page code is as

<ion-tab [root]=“tab1Root” tabTitle=“My Rx” tabIcon=“ios-medical-outline”>
<ion-tab [root]=“tab2Root” tabTitle=“Search” tabIcon=“search”>
<ion-tab [root]=“tab3Root” tabTitle=“Settings” tabIcon=“ios-settings-outline”>

ion-tabs selectedIndex=“1”

my ts page is ::

import { Component } from ‘@angular/core’;
import { HomePage } from ‘…/home/home’;
import { MyRxPage } from ‘…/my-rx/my-rx’;
import { SettingsPage } from ‘…/settings/settings’;
import { NavController, LoadingController, Select, RadioButton } from ‘ionic-angular’;

templateUrl: ‘tabs.html’
export class TabsPage {
tab1Root = MyRxPage;
tab2Root = HomePage;
tab3Root = SettingsPage;
constructor(public navCtrl: NavController) {

Sir, I want in a way that, when I’ll click on any tab, concern page should reload accordingly.
Please help me

Hello, @dilipkumar1007

Just write your main code( that reflect when page loads )inside ionViewWillEnter() in MyRxPage,HomePage,SettingsPage

If there is a sub page of the root page and you navigate back to root page from it, then ionViewWillEnter() is not triggering for me.
Ex: HomePage has button on click it goes to user page. Now if I hit back from user page it will redirect to HomePage but ionViewWillEnter is not getting triggered. This happens only with tabs, for normal pages it is getting triggered.


Thnx for your kind support, It works for me

Hello, @vasanthb

Please post your home page code

export class HomePage {
//calling an API

Hello, @vasanthb
it should work

ionViewWillEnter is not triggering for me either.
Someone have a solution ?

Show your code lets see what you are doing

In Ionic 4 with Angular router nothing above worked for me. I did find a way through watching the router and catching my tab URL when triggered.

  routerWatch() {
    this.routerSubscription =
      (event: NavigationEnd) => {
        if(event instanceof NavigationEnd) {
          if(event.url == '/tabs/(jobs:jobs)')
   = null;

ionPageWillLeave() {

make sure to Unsubscribe on ionPageWillLeave or ionPageDidLeave or you will end up with a massive memory leak.

Thank you for this! Used your method and it is working for me.

Surely ionViewWillEnter() should fire when coming back to a tab…? I hope the Ionic team addresses this at some point.

You can make a case for this position, but I think it’s miles from “surely”. In any event, as a defensive programmer I think the most prudent approach is to assume nothing about willEnter/willLeave events aside from the fact that they come in pairs: you will never get two of the same kind in a row.

It does not in Ionic 4, not a single page event fires when navigating from one tab to another.

I said all you can rely on is:

you will never get two of the same kind in a row.

If you don’t get any, isn’t that still true?

Even with my router watch I end up with memory leaks. This page caching is garbage, Im removing Tabs altogether and adding tabs manually to every page.

If doesn´t work ionViewWillEnter()
Force refreshing with: this.navCtrl.setRoot(this.navCtrl.getActive().component);

Hi in Ionic 5 I solved this problem,
tabs.html file::

<ion-tabs #tabs (ionTabsWillChange)=“gets(tabs)”>

{{'home' | translate}}

in tabs.ts file :::
gets(tab: IonTabs) {
if ("/tabs/" + tab.getSelected() != this.router.url) {
this.router.navigateByUrl(“tabs/” + tab.getSelected());

this code worked for me. when tab selected if in children route , reload page.