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?

Continue reading...