Ripple animation breaks on navigation

[TheOnlyMatt]

There is a tap event set on the ripple :

<Ripple
                rippleColor="#a0a0a0"
                *ngFor="let child of rubrique.children"
                (tap)="onElementTap($event, child)">
...

Inside the onElementTap function I use angular router extension to navigate to another page :

this.routerExtensions.navigate(["/simple_content"],  {
            transition: {
                name: "slideLeft",
                duration: 300,
                curve: "easeInOut"
            }
        })

When I tap the ripple element, the effect doesn't display, or just begins and then freezes before opening the new view. This is akward because it looks like the UI is frozen for the user :/

I know this is the navigation which makes this occurs, because in the case an external link is opened, the animation runs fine before opening the browser.

[paidTrainee27]

try using (itemTap) instead of (tap) along with ListView then ripple will come automatically and you wont need 'ripple' wrapper

[TheOnlyMatt]

I cannot really use ListView, it doesn't match with my UI