Ionic ion-button in tabs root page not working in tabs pages

I have created an ionic application which have a page that consists of 4 tabs the problem is the base page of the tabs is service-details which has a select box in header and ion-tabs in content. When I trigger the ionChange being inside of the base page it works fine but when I move to a tab and trigger ionChange from the base page it give me error. Here is the service-details.html

         <ion-buttons slot="start" defaulthref="/service-category">
           <!-- <ion-back-button></ion-back-button>  -->
            <ion-icon name="menu"></ion-icon>
         <ion-buttons slot="end">
          <ion-icon name="notifications"></ion-icon>

         <ion-title text-center>Select Services</ion-title>


      <ion-item class="branch-detail">
       <ion-icon name="pin"></ion-icon>
       <ion-label>You are in</ion-label>
       <ion-select placeholder="" (ionChange)="onBranchChange($event)">
        <ion-select-option  *ngFor="let item of branches;" value=" 
         {{item?.Id}}" (ionChange)="onBranchChange($event)">{{item?.Name}} 

       <ion-tabs padding-top>
        <ion-tab-bar slot="top">
         <!-- <ion-tab-button tab="packages">
           </ion-tab-button> -->

       <ion-tab-button tab="face" >

       <ion-tab-button tab="hair">

       <ion-tab-button tab="nail">

      <ion-tab-button tab="body">


Here is the function onBranchChange() in