title: How to detect tab change from the active tab page
body: <p>While searching in the <a href="https://ionicframework.com/docs/api/tabs#events" rel="nofollow noreferrer">Ionic docs</a> to find how to detect tab change, I found that there is the <code>ionTabsDidChange</code> event that is directly linked to the <code>ion-tabs</code> component.</p>
  
  <p>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.</p>
  
  <p>For example, if I have a component named <code>TabXPage</code>, I wonder if there is a way to create a method that helps to listen to the tab change, something like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>@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
      }
  
  }
  </code></pre>
  
  <p>I looked upon <a href="https://angular.io/guide/lifecycle-hooks" rel="nofollow noreferrer">Angular lifecycle hooks</a>, but I did not find any applicable event since the page is preserved in the same state while navigating through the Ionic tabs. </p>