How to use Page Transition in NativeScript - angular2-nativescript

Question

I'm trying to use page transition from routerExtensions without success. (2.3.0)
I tried in js:
this.routerExtensions.navigate(
[
'myPage'
],
{
animated: true,
transition:
{
name: 'flip',
duration: 2000,
curve: 'linear'
}
}
);
and I tried in the xml:
<Button text="Goto myPage" [nsRouterLink]="['/myPage']" pageTransition="flip"></Button>
Both ways works as I navigate to "myPage" but without animations.
Is there a setting I need to change to "enable" the animations or am I missing something obvious?

Answer 1

With the provided context it's difficult to say exactly why it's not working.
All you should really need to do is:
Setup the components you're routing to:
app-routing.module.ts
const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: '/home' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
];
Inject the native router extensions in the component with your router-outlet
app.component.ts
import { RouterExtensions } from "#nativescript/angular/router";
#Component({
selector: "ns-app",
templateUrl: "./app.component.html"
})
export class AppComponent {
constructor(private routerExtensions: RouterExtensions) {}
public navigate(link: string): void {
this.routerExtensions.navigate([link], {
animated: true,
transition: { name: 'slide' }
});
}
}
And of course have a way to call this method
app.component.ts
<StackLayout>
<FlexboxLayout>
<Button text="Home" (tap)="navigate('home')"></Button>
<Button text="About" (tap)="navigate('about')"></Button>
<Button text="Contact" (tap)="navigate('contact')"></Button>
</FlexboxLayout>
<StackLayout>
<page-router-outlet actionBarVisibility="never"></page-router-outlet>
</StackLayout>
</StackLayout>
I've setup a working repo demonstrating this here https://github.com/gsavchenko/nativescript-page-transitions. These are also possible to achieve in angular not using nativescript native routing APIs.
Cheers,
let me know if there are further questions.

Answer 2

Have a look at the Groceries app by nativescript and its a great resource for all nativescript component - https://github.com/NativeScript/sample-Groceries. You can find the transition animation they have given in it.
Good Luck. If need any help ask.