Why is onsegmentchange event only happening after timeout code is completed - asynchronous

Question

There is an issue where ionSegmentChange is processing the change only after the timeout is completed and not before even though this.section has been changed before the timeout is called.
Result
HTML File
<ion-segment *ngIf="this.os == 'ios'" class="forms-examples-segment-ios" [(ngModel)]="section" (ionChange)="onSegmentChanged($event)">
</ion-segment>
TS FILE
let ticketToScrollTo = null;
let notification_item_segment_type = null;
//User was already on another page that is not TicketListPage when notification was clicked (Ticket list page was pushed into nav controller)
if(!userOnCurrentPageWhenNotificationTriggered){
ticketToScrollTo = this.navParams.get('item_id');
notification_item_segment_type = this.navParams.get('ticket_segment_type');
}
//User was already on TicketListPage when notification was clicked (Page is refreshed rather than push to nav controller)
else{
ticketToScrollTo = this.notification_item_id;
notification_item_segment_type = this.notification_ticket_segment_type;
}
// Check if this page was accessed through clicking on mobile notification
if(ticketToScrollTo){
console.log("Page entered through notification");
let targetSection = null;
console.log("Classification that is received = "+notification_item_segment_type);
targetSection = notification_item_segment_type;
console.log("Target Section = "+targetSection);
console.log("THIS OS = "+ this.os);
this.section= targetSection;
console.log("Target section value has been changed, waiting for segment event handler to process it");
setTimeout(()=> {
console.log("Scrolling item to notification item");
console.log(notification_item_segment_type+"_"+ticketToScrollTo);
let notification_ticket_item = <HTMLElement>document.getElementById(notification_item_segment_type+"_"+ticketToScrollTo);
console.log(notification_ticket_item);
if(notification_ticket_item){
console.log("Item found and scrolling item into view");
notification_ticket_item.style.border ="5px solid #FFDCCD";
notification_ticket_item.style.boxShadow ="5px 8px rgb(0 0 0 / 30%)";
notification_ticket_item.style.marginBottom = '16px';
notification_ticket_item.scrollIntoView({
behavior: 'smooth',
block: "center"
});
console.log("DONE GETTING INITIAL DATA");
loader.dismiss();
}
else{
console.log("DONE GETTING INITIAL DATA");
loader.dismiss();
}
},10000);
}