IONIC 5 header toolbar button click router.navigate not triggering navAnimation


IONIC 5 Cordova android/ios - the button/item click(router.navigate) inside a toolbar is not triggering navAnimation. I tried the custom animation from this post. This animation is working when router.navigate called from content control clicks.

I have 2 versions but both of them working. One is with ion-header/ion-toolbar/ion-item/button. The other with ion-header/<toolbar component with button/item>. I tried the back button inside a toolbar as well. For some reason navAnimation is not triggering when router.navigate initiated from a control inside toolbar. The issues is in both ios and android.

I need to implement a different animation when clicked on button/item click navigate to a page. Appreciate your help on this issue.