Platform specific page transitions.

[m-abs]

Thank you for adding page transitions to the router.

Could you also add platform specific page transitions?
{N}'s NavigationEntry have three transition parameters:
https://docs.nativescript.org/api-reference/interfaces/_ui_frame_.navigationentry.html#transition

• transition
• transitionAndroid
• transitionIOS

In the current implementation nativescript-angular only supports transition, so if we want to set another transition for iOS than we want for Android we can't do that.

[NickIliev]

Hello @m-abs ,

You can use Angular-2 directives (like *ngIf, ngSwitch or custom ones) to create your own platform-specific controls.
e.g. with custom directive

my-page.component.ts

import {Component, Directive, ViewContainerRef, TemplateRef, Inject} from '@angular/core';
import {Device, platformNames} from "platform";
import {DEVICE} from "nativescript-angular/platform-providers";

@Directive({ selector: "[ifAndroid]" })
export class IfAndroidDirective {
    constructor( @Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) {
        if (device.os === platformNames.android) {
            container.createEmbeddedView(templateRef);
        }
    }
}

@Directive({ selector: "[ifIos]" })
export class IfIosDirective {
    constructor( @Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) {
        if (device.os === platformNames.ios) {
            container.createEmbeddedView(templateRef);
        }
    }
}

@Component({
    selector: ' my-page.component',
    directives: [IfIosDirective, IfAndroidDirective],
    templateUrl: " my-page.component.html",
})

export class CreateCustomDirectiveExampleComponent{

}

my-page.component.html

<Button *ifAndroid [nsRouterLink]="yourLink" pageTransition="explode" ></Button >
<Button *ifIos [nsRouterLink]="yourLink" pageTransition="curl" ></Button >

Another example with the usage of *ngIf can also be applicable for your case (with a little modification to set the specific page transition).

[m-abs]

Hi @NickIliev

Thank you for your suggestion.

Unfortunately it only covers using the [nsRouterLink]-directive for navigating. It doesn't cover using the RouterExtensions-class directly.

[vakrilov]

In code you can do:

import {isAndroid, isIOS} from "platform";

And pass different transitions based on the isAndroid and isIOS variables.

[m-abs]

That's a good idea, thank you.