NativeScript: Wire up RadSideDrawer from 'nativescript-telerik-ui' with Angular2 taking full advantage of Router

app.component.ts

// angular
import {Component} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app',
  template: `
  <StackLayout>
    <page-router-outlet></page-router-outlet>
  </StackLayout>
  `
})
export class AppComponent { 
}

app.routes.ts

import { Routes } from '@angular/router';
// Purely an example
// Change the routes/components to meet your needs
export const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: "home",
    component: HomeComponent,
    children: [
      // '/home' loaded into `router-outlet` in main content
      { path: "", component: StartComponent }, 
      // '/home/otherPath' loaded into `router-outlet` in main content
      { path: "otherPath", component: SomeOtherComponent },  
      // etc.
    ]
  },   
  // '/someNavPage' pushed on nav stack using `page-router-outlet` (ie, push on a detail view with no drawer)
  { path: "someNavPage", component: NavPageComponent },
  // etc.
];

home.component.html

<ActionBar title="App Title">
  <ActionItem (tap)="toggle()">
    <!-- example: using font-awesome for hamburger menu but you can use whatever you'd like -->
    <Button class="fa" text="&#xf0c9;"></Button> 
    <!-- however in your project, would be easier to use this plugin: https://github.com/NathanWalker/nativescript-fonticon -->
  </ActionItem>
</ActionBar>
<RadSideDrawer #drawer [transition]="sideDrawerTransition" selectionBehavior="None">
  <StackLayout tkDrawerContent>
    <!-- anything you want in drawer -->
    <!-- for example: -->
    <!-- you want options {exact: true} on the first one because otherwise it would be considered active when 'Other Page' in active as well -->
    <Button text="Home" [nsRouterLink]="['/home']" nsRouterLinkActive="active" [nsRouterLinkActiveOptions]="{exact:true}"></Button>
    <Button text="Other Page" [nsRouterLink]="['/home/otherPath']" nsRouterLinkActive="active"></Button>
  </StackLayout>
  <StackLayout tkMainContent>
    <router-outlet></router-outlet>
  </StackLayout>
</RadSideDrawer>

home.component.ts

// angular
import {Component, ViewChild, ChangeDetectorRef, Inject, OnInit, AfterViewInit} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';

// nativescript
import {RadSideDrawerComponent, SideDrawerType} from 'nativescript-telerik-ui-pro/sidedrawer/angular';
import {DrawerTransitionBase, SlideInOnTopTransition} from 'nativescript-telerik-ui-pro/sidedrawer';
import {Page} from "ui/page";

@Component({
  moduleId: module.id,
  selector: 'home',
  templateUrl: 'home.component.html',
  // Using this style here requires you to setup font icons in your project
  // See here on how to do that: https://docs.nativescript.org/ui/icon-fonts
  // Another nice option is to use this plugin: https://github.com/NathanWalker/nativescript-fonticon
  styles: [`
    .fa {
      font-family: FontAwesome, fontawesome-webfont;
      font-size:20;
    }
  `]
})
export class HomeComponent implements OnInit, AfterViewInit {

  @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
  private _sideDrawerTransition: DrawerTransitionBase;
  private _drawer: SideDrawerType;
  
  constructor(
    @Inject(Page) private _page: Page,
    private _changeDetectionRef: ChangeDetectorRef,
    private _router: Router) {
    _page.on("loaded", this.onLoaded, this);
  }

  public get sideDrawerTransition(): DrawerTransitionBase {
    return this._sideDrawerTransition;
  }
  
  public toggle() {
    this._drawer.toggleDrawerState();
  }

  public onLoaded(args) {
    this._sideDrawerTransition = new SlideInOnTopTransition();
  }

  ngOnInit() {
    this.router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        this._drawer.closeDrawer();
      }
    });
  }

  ngAfterViewInit() {
    this._drawer = this.drawerComponent.sideDrawer;
    this._changeDetectionRef.detectChanges();
  }
}

main.ts

// nativescript
// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { NativeScriptModule, platformNativeScriptDynamic } from 'nativescript-angular/platform';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { NativeScriptRouterModule } from 'nativescript-angular/router';
import { SIDEDRAWER_PROVIDERS, SIDEDRAWER_DIRECTIVES } from "nativescript-telerik-ui-pro/sidedrawer/angular";

// app
import {AppComponent} from './app.component';
import {HomeComponent} from './home.component';
// import other components, etc.
import {routes} from './app.routes';

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptRouterModule.forRoot(routes)
  ],
  declarations: [
    SIDEDRAWER_DIRECTIVES,
    AppComponent,
    HomeComponent,
    // other components used in routes, etc.
  ],
  providers: [
    SIDEDRAWER_PROVIDERS
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

platformNativeScriptDynamic().bootstrapModule(AppModule);

This helped a lot! Is there a way to make it so that the drawer stretches to the whole height of the app though? It looks very odd.

@EddyVerbruggen can you elaborate on your solution for the master-detail-navigation-destroys-the-master fix? If I take the example above and say on SomeOtherComponent I want to navigate (push) to NavPageComponent then I put the page-router-outlet as the first child in "NavPageComponent". I navigate to it using .navigate(["/someNavPage]) on SomeOtherComponent. It appears that SomeOtherComponent gets recreated when going back from NavPageComponent.

I appreciate your help!

@NathanWalker / @EddyVerbruggen May I know the work around to prevent the master page from re-created on back navigation?

I tried wrapping the first page after router-outlet with page-router-outlet, but still same issue. Not sure what I am missing. Could you please update this example if possible?

i upgrade the example here https://github.com/DrMabuse23/nativescript-nested-navigationtests with the newest versions and structure in with ns >3.0

@DrMabuse23 nice example, exactly what I was looking for.

you're awesome, thanks for sharing!