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

Ionic Framework ionic-v3
1

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-header>
       <ion-toolbar>
         <ion-buttons slot="start" defaulthref="/service-category">
           <!-- <ion-back-button></ion-back-button>  -->
            <ion-icon name="menu"></ion-icon>
         </ion-buttons>
         <ion-buttons slot="end">
          <ion-icon name="notifications"></ion-icon>
         </ion-buttons>

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

      </ion-header>

      <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-select-option>
       </ion-select>
      </ion-item>

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

       <ion-tab-button tab="face" >
        <ion-label>Face</ion-label>
       </ion-tab-button>

       <ion-tab-button tab="hair">
        <ion-label>Hair</ion-label>
       </ion-tab-button>

       <ion-tab-button tab="nail">
        <ion-label>Nail</ion-label>
       </ion-tab-button>

      <ion-tab-button tab="body">
        <ion-label>Body</ion-label>
      </ion-tab-button>



      </ion-tab-bar>
     </ion-tabs>
    </ion-content>

Here is the function onBranchChange() in service-details.page.ts

onBranchChange($event){

     this.appointments.BranchId=$event.target.value;

   }