Last active
December 13, 2017 15:54
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// angular | |
import {Component} from '@angular/core'; | |
@Component({ | |
moduleId: module.id, | |
selector: 'app', | |
template: ` | |
<StackLayout> | |
<page-router-outlet></page-router-outlet> | |
</StackLayout> | |
` | |
}) | |
export class AppComponent { | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | |
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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(); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); |
@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!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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!