Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
NativeScript: Wire up RadSideDrawer from 'nativescript-telerik-ui' with Angular2 taking full advantage of Router
// 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="&#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>
// 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);
@jlooper

This comment has been minimized.

Copy link

commented Aug 24, 2016

💰

@roblav96

This comment has been minimized.

Copy link

commented Aug 30, 2016

👍

@NathanWalker

This comment has been minimized.

Copy link
Owner Author

commented Sep 2, 2016

^ This is now updated for rc.5 👍

@lohithgn

This comment has been minimized.

Copy link

commented Sep 17, 2016

hey nathan

i am currently on {N} 2.3.0. i am using NG template from here: https://github.com/NativeScript/template-hello-world-ng. i tried to use your above code. I have included the nativescript-telerik-ui-pro component. in main.ts - the line where we include SIDEDRAWER_PROVIDERS - i get an error saying its not found in "nativescript-telerik-ui-pro/sidedrawer/angular" ???

any idea whats going wrong here ?

@bootdeveloper

This comment has been minimized.

Copy link

commented Sep 21, 2016

Hi Nathan,

I'm having an error similar to lohithgn. But in my case it tells me that nativescript-telerik-ui/sidedrawer/angular/index has no exported member SIDEDRAWER_PROVIDERS. I'm using the 2.3.0 {N}, 1.4.1 free version of nativescript-telerik-ui...

Any idea? Thanks.

@RichardSilveira

This comment has been minimized.

Copy link

commented Sep 21, 2016

Hi, you don´t need of SIDEDRAWER_PROVIDERS anymore.
I cloned the angular2-seed-advanced today and configured the RadSideDrawer from nativescript-telerik-ui package using the 1.4.1 lastest version.

This is the commit that i set the RadSideDrawer:
https://github.com/RichardSilveira/angular2-seed-advanced/commit/6f3845ad77b76f46fc0979a2618305fb8a5b5300

@kalanaw

This comment has been minimized.

Copy link

commented Oct 5, 2016

Hi Nathan,

Would you be kind to include an update that supports nativescript-telerik-ui (1.4.1) without SIDEDRAWER_PROVIDERS.

Thanks.

@patrickpereira

This comment has been minimized.

Copy link

commented Nov 23, 2016

+1

@abhishekit29

This comment has been minimized.

Copy link

commented Dec 8, 2016

There are two routes in that side drawer one to normal page with text the other one to a nativescript-chatview
but on tapping navigation button side drawer is not opening from nativescript-chatview route

@abhishekit29

This comment has been minimized.

Copy link

commented Jan 14, 2017

+1

@EddyVerbruggen

This comment has been minimized.

Copy link

commented Feb 10, 2017

This Gist saved my ass, thanks Nathan!

There seems to be one major caveat though: due to this line the StartComponent component gets destroyed when navigating away (to otherPath).

So when navigating back StartComponent is recreated. That's a big no no for master-detail navigation where master is a listview and you want to retain the scroll position.

Anyone has an idea how to make sure the components are not destroyed? According to the docs that's actually correct behaviour.. but it renders using the menu useless when nested views are required..

UPDATE: figured it out. The first page after that router-outlet tag needs to be a wrapper page with a page-router-outlet. That will track the state of any consecutive navigation.

@iliraga

This comment has been minimized.

Copy link

commented Mar 8, 2017

Has anybody some project code where this code is used, for example for https://github.com/NativeScript/template-hello-world-ng ? Somehow I'm not able to integrate it into my existing ng2 project.

Everything works, but when opening an other page beside the "home", it has strange rendering issues.
The sidebar gets cut out and will only show partially

@greenstevester

This comment has been minimized.

Copy link

commented Mar 9, 2017

@iliraga, I fought with getting the RadSideDrawer going with the Angular Router an posted a working project here: https://github.com/greenstevester/nativescript-sidedrawer-example

@iliraga

This comment has been minimized.

Copy link

commented Mar 9, 2017

Thx a lot @greenstevester ! You're code doesn't work while executing, but it still helped me a lot:

1 0x105fba8d7 -[TNSRuntime executeModule:] 2 0x105793532 main 3 0x10ae6368d start 4 0x1 file:///app/tns_modules/nativescript-angular/index.js:4:8: JS ERROR Error: Could not find module 'application'. Computed path '/Users/ormesijechh/Library/Developer/CoreSimulator/Devices/D9FD7E5E-2224-4F03-B8FF-A4846A5A2395/data/Containers/Bundle/Application/6C641618-56E8-41E3-9782-F50F8F4A0894/nativescriptsidedrawerexample.app/app/tns_modules/application'.

This StackLayout caused the issue. When removing, everything works properly.

@fernandomitre7

This comment has been minimized.

Copy link

commented Mar 22, 2017

Thanks @greenstevester between you and @NathanWalker I have made progress on implementing the RadSideDrawer, but when running on ios emulator (I have only tested ios) the actual sidedraw is not showing, I get all the events when I click the actionbar button (drawerOpening, drawerOpenned, etc) but I don't see anything. Have you guys encountered this on your projects?
This is my repo

Update: Never mind there was a StackLayout that was off. Thanks!

@adamk33n3r

This comment has been minimized.

Copy link

commented Mar 30, 2017

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.

@michellehardatwork

This comment has been minimized.

Copy link

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!

@manojdcoder

This comment has been minimized.

Copy link

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?

@DrMabuse23

This comment has been minimized.

Copy link

commented Jun 14, 2017

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

@ghost

This comment has been minimized.

Copy link

commented Aug 7, 2017

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

@jdnichollsc

This comment has been minimized.

Copy link

commented Nov 16, 2017

you're awesome, thanks for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.