Navigation Angular 2 page-router-outlet with animation Nativescript app



I have my app with a detail page like this:


When I pass from /noticias to /noticias/:id there is a nice default transition, but when I swipe to the next /noticias/:id only changes the value of the components but there is no transition.

I have read and I know that when i use the page-router-outlet the component get a cache value and like I still calling this component it is not rendering again and I am only changing the values that I send.

I want to make a transition between this different values, can anyone help me ?

I also tried the page transition but it still with no results.

transition: {
name: “slide”,
duration: 200,
curve: “spring”

Thanks !


you can use in the html i.e. => [nsRouterLink]="[’/noticia’, this.current]"

or in the code i.e. => this.routerExt.navigate(["/noticia", id]);

after your transition … i.e

this.routerExtensions.navigate(["/noticia", id], {
transition: {
name: “flip”,
duration: 2000,
curve: “linear”


Hi, thanks for your time.

I tried what you suggest.

This is my routing configuration.

export const routes = [
{ path: “”, component: NoticiasComponent },
{ path: “webcam”, component: WebcamComponent },
{ path: “noticia/:current”, component: SingleNoticiaComponent}

When user swipe on the page I make this, depending of the swipe direction the current value decrement or increase.

transition: {
name: “flip”,
duration: 200,
curve: “spring”

The page transition only do when the component render at the first time, while the component is already render, it only changes the values that i send.

I made a gif of the result. You can see on the next link

Thank you again.


Of course, I suppose it’s because you change IDs in reality, nothing else


What is the way to solve this problem?
I have the same problem.



@heracles007 I solved this problem using setTimeout and angular transitions. Take a look, at the bottom: