How to detect tab change from the active tab page

Question

While searching in the Ionic docs to find how to detect tab change, I found that there is the ionTabsDidChange event that is directly linked to the ion-tabs component.

My purpose is slightly different in the way that I need to listen to the tab change from the page/component related to the tab itself, and use some of its data.

For example, if I have a component named TabXPage, I wonder if there is a way to create a method that helps to listen to the tab change, something like this:

@Component({
  selector: 'app-tabx',
  templateUrl: './tabx.page.html',
  styleUrls: ['./tabx.page.scss'],
})
export class TabXPage implements OnInit {

    //...

    onTabChange() {
        // Execute tab change actions using some data that EXISTS IN TabXPage
    }

}

I looked upon Angular lifecycle hooks, but I did not find any applicable event since the page is preserved in the same state while navigating through the Ionic tabs.

Answer 1

I found a solution using Ionic lifecycle hooks, I am not sure if it's the best regarding the subject but it's working for my case.

I used simply the ionViewDidLeave page event:

@Component({
  selector: 'app-tabx',
  templateUrl: './tabx.page.html',
  styleUrls: ['./tabx.page.scss'],
})
export class TabXPage implements OnInit {
    //...

    ionViewDidLeave() {
        console.log("TabX is exited")
    }
}