NativeScript - how to delay routing until the sidedrawer has closed?

Question

I'm writing an app with NativeScript 6.4.1 and Angular 8.

I've included the SideDrawer feature in my project.

https://docs.nativescript.org/ui/components/SideDrawer/getting-started So far it's working great.

One thing I noticed is that when I logout of the app, I logout through the SideDrawer and then route to the first page in the app. This transition from side drawer to the main page is not very smooth.

How can I wait until the side drawer has closed before routing or else make the transition smoother?

sample code:

export class LogoutService {

    constructor(private routerExtensions: RouterExtensions, private sideDrawerService: SideDrawerService) {}

    public logout(): void {
        appSettings.clear();
        this.sideDrawerService.closeDrawer();
        this.routerExtensions.navigate(['landing-page'], { clearHistory: true });
    }

}

export class SideDrawerService {

    constructor() {}

    public showSideDrawer() {
        const sideDrawer = app.getRootView() as RadSideDrawer;
        sideDrawer.showDrawer();
    }

    public closeDrawer() {
        const sideDrawer = app.getRootView() as RadSideDrawer;
        sideDrawer.closeDrawer();
    }

}

Edit: I can see in the documentation here that there are some events that are fired when https://docs.nativescript.org/ns-ui-api-reference/classes/radsidedrawer#drawerclosedevent

How do I listen for these events?

I tried something like this but it doesn't work:

public closeDrawerAsync() {

    const sideDrawer = app.getRootView() as RadSideDrawer;

    sideDrawer.drawerClosedEvent //this does not seem to exist

}

Answer 1

Use drawerClosed event

export class SideDrawerService {
    ...
    closeDrawer (callback?: () => void) {
       const sideDrawer = app.getRootView() as RadSideDrawer;
       if (callback) {
         callback = zonedCallback(callback);
         sideDrawer.once(RadSideDrawer.drawerClosedEvent, () => {
             callback();
         });
       }
       sideDrawer.closeDrawer();
    }
    ...
}

Now you can use it like,

public logout(): void {
    appSettings.clear();
    this.sideDrawerService.closeDrawer(()=> {
       this.routerExtensions.navigate(['landing-page'], { clearHistory: true });
    });
}