NathanWalker/app.component.ts

## 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);
	// angular
	import {Component} from '@angular/core';

	@Component({
	moduleId: module.id,
	selector: 'app',
	template: `
	<StackLayout>
	<page-router-outlet></page-router-outlet>
	</StackLayout>
	`
	})
	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=""></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>
	// 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();
	}
	}
	// 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);