-
-
Save NathanWalker/e8f4f7c42af04fc725764a9867936e3d to your computer and use it in GitHub Desktop.
// 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); |
👍
^ This is now updated for rc.5 👍
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 ?
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.
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
Hi Nathan,
Would you be kind to include an update that supports nativescript-telerik-ui (1.4.1) without SIDEDRAWER_PROVIDERS.
Thanks.
+1
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
+1
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.
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
@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
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.
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!
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!
💰