Activity transition



I have two compoments.
The first is for the connexion and the second is for the inscription.
In the connexion component there is a button to go to the inscription component.
The code to go to the inscription component is :

	    this.routerExtensions.navigate(["/Inscription"], { 
	    	clearHistory: true,
	        transition: {
	            name: "slide"

Could you tell me if that is the good way ?

After, for the inscription component, I would like to load the page and when the page is load, I would like to display a loading dialog to load datas from server.
It is my code :

    ngAfterViewInit():void {; // that show the loading dialog
       this.recupVilles(); //the http function to load datas

But the probleme is that when I click to the button inscription in the connexion component, I see at first the loading dialog and after the inscription component. And I think that load the data before display the component. But I want the reverse.
Maybe it is because “ngAfterViewInit” is not the good function ? But I don’t know what is the good function to write.
Could you tell me how to make that ?



Use navigatedTo event of page / layoutChanged event of the root view in the component which happens once the component is displayed.


And for my others questions about the starting of the inscription and ngAfterViewInit ?


Ok Thank you
And for my others questions about the starting of the inscription and ngAfterViewInit ?


Could you ou help me please ?


My answer was for both, use those events to make sure your transition is completed.


Could you show me an example, because I searched but I don’t know how to resolve the problem ?


layoutChanged event could be triggered multiple times when layout / bounds are updated. So I use my own directive to listen only once for the event.

import { Directive, OnDestroy, Input, Output, EventEmitter, ElementRef, Renderer2 } from "@angular/core";

import { EventData } from "data/observable";
import { View } from "ui/core/view";

    selector: "[listenOnce]",
export class ListenOnceDirective implements OnDestroy {

    @Input() eventName: string = View.layoutChangedEvent;
    @Output() listenOnce: EventEmitter<EventData> = new EventEmitter();

    listener: () => void;

    constructor(renderer: Renderer2,
        el: ElementRef) {
        this.listener = renderer.listen(el.nativeElement, this.eventName, (event: EventData) => {

    ngOnDestroy() {

    private removeListener() {
        if (this.listener) {
            this.listener = null;

Once you have this directive imported, you can do something like this (on any element)

<StackLayout (listenOnce)="onInit()">

Now onInit function will be called when transition is completed.