Skip to content

Instantly share code, notes, and snippets.

Last active December 13, 2017 15:54
Show Gist options
  • Save NathanWalker/e8f4f7c42af04fc725764a9867936e3d to your computer and use it in GitHub Desktop.
Save NathanWalker/e8f4f7c42af04fc725764a9867936e3d to your computer and use it in GitHub Desktop.
NativeScript: Wire up RadSideDrawer from 'nativescript-telerik-ui' with Angular2 taking full advantage of Router
// angular
import {Component} from '@angular/core';
selector: 'app',
template: `
export class AppComponent {
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.
<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: -->
<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 tkMainContent>
// 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";
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:
// Another nice option is to use this plugin:
styles: [`
.fa {
font-family: FontAwesome, fontawesome-webfont;
export class HomeComponent implements OnInit, AfterViewInit {
@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private _sideDrawerTransition: DrawerTransitionBase;
private _drawer: SideDrawerType;
@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() {
public onLoaded(args) {
this._sideDrawerTransition = new SlideInOnTopTransition();
ngOnInit() { => {
if (e instanceof NavigationEnd) {
ngAfterViewInit() {
this._drawer = this.drawerComponent.sideDrawer;
// 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';
imports: [
declarations: [
// other components used in routes, etc.
providers: [
bootstrap: [AppComponent]
export class AppModule { }
Copy link

michellehardatwork commented Apr 18, 2017

@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!

Copy link

manojdcoder commented May 7, 2017

@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?

Copy link

i upgrade the example here with the newest versions and structure in with ns >3.0

Copy link

ghost commented Aug 7, 2017

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

Copy link

you're awesome, thanks for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment