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;
}