Dispatch event not working during page route

I’m working on a Angular 14 application in which on a specific scenario where the page load gets the current date (selected from a datepicker) and pass it to the backend to get the data .

In this case the I trigger the datachange event manually in ngOnInit which works on page load or refresh but the event doesn’t get fired when the internal navigation/route happens.

//HTML
<input type="date" id="bookedDate" formControlName="bookedDate" [min]="getToday" (change)="changeDate($event)" />
    
//Typescript
ngOnInit(): void{
const inputElement = document.getElementId('bookedDate) as HTMLInputElement;
if(inputElement){
    this.ngZone.runOutsideAngular(() => {
    setTimeout(() => {
      const event = new Event(çhange', {bubbles: true});
      //this gets fired in pagerefresh or navigation
      inputElement.dispatchEvent(event);
      });
    });
  }
}
    
changeDate(e:any){
  // this event not firing on page navigation
}

Tried multiple options using ngAfterViewInit, Router/Route events subscription but nothing helped.

Where am i wrong?