Hello,
I am using {N} + Angular2. I have already working 1 RadSideDrawer(Navigation), now i am in need of second one.
Basicly there are 2 buttons in ActionBar: 1) Navigation 2) Search. I need to open each RadSideDrawer by clicking on the individual button.
Current code( Only navigation RadSideDrawer works ):
35 export class Header extends Observable implements OnInit {
36 public currentUserId: BehaviorSubject<string> = new BehaviorSubject("0");
37 @Output() toggleSearch = new EventEmitter();
38
39 constructor(private _changeDetectionRef: ChangeDetectorRef, private ngZone: NgZone, private photoService: PhotoService, private _router: Router) {
40 super();
41 this.ngZone.run(() => {
42 firebase.getCurrentUser().then((data) => {
43 this.currentUserId.next(data.uid);
44 });
45 });
46 }
47
48 @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
49 private drawer: SideDrawerType;
50 private search: SideDrawerType;
51
52 ngAfterViewInit() {
53 this.drawer = this.drawerComponent.sideDrawer;
54 this.search = this.drawerComponent.sideDrawer;
55 this._changeDetectionRef.detectChanges();
56 }
57
58 ngOnInit() {
59 this.set("mainContentText", "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component"
60 + " has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.");
61
62 }
63
64 public openDrawer() {
65 this.drawer.showDrawer();
66 }
67
68 public openSearch() {
69 this.search.showDrawer();
70 }
1 <RadSideDrawerSearch #search>
2 <StackLayout tkDrawerContent class="sideStackLayout">
3 <StackLayout class="sideStackLayout">
4 <Label text="Dashboard" [nsRouterLink]="['/dashboard']" class="sideLabel"></Label>
5 </StackLayout>
6 </StackLayout>
7 <StackLayout tkMainContent>
8 </StackLayout>
9 </RadSideDrawerSearch>
10
11 <RadSideDrawer #drawer>
12 <StackLayout tkDrawerContent class="sideStackLayout">
13 <StackLayout class="sideStackLayout">
14 <Label text="Dashboard" [nsRouterLink]="['/dashboard']" class="sideLabel"></Label>
15 <Label text="My profile" [nsRouterLink]="['/profile', currentUserId.getValue()]" class="sideLabel"></Label>
16 <Label text="Take a Picture" (tap)="takePicture()" class="sideLabel"></Label>
17 <Label text="Take a Video" (tap)="takeVideo()" class="sideLabel"></Label>
18 <Label text="Jobs" [nsRouterLink]="['/jobs']" class="sideLabel"></Label>
19 </StackLayout>
20 </StackLayout>
21 <StackLayout tkMainContent>
22 <ActionBar title="" class="actionbar-designed">
23 <android>
24 <GridLayout horizontalAlignment="center" verticalAlignment="center">
25 <Image src="res://avatar" horizontalAlignment="left" class="profile-avatar" [nsRouterLink]="['/profile', currentUserId.getValue()]"></Image>
26 <Label horizontalAlignment="left" class="message-bubble" text="4"></Label>
27
28 <GridLayout columns="auto, auto" horizontalAlignment="center" (tap)="openDrawer()">
29 <Label class="section-name" text="Dashboard"></Label>
30 <Label col="1" class="fa arrow-down" text=""></Label>
31 </GridLayout>
32
33 <Label horizontalAlignment="right" minWidth="35" class="fa search" (tap)="openSearch()" text=""></Label>
34 </GridLayout>
35 </android>
36 </ActionBar>
37 <ng-content></ng-content>
38 </StackLayout>
39 </RadSideDrawer>
How can i make this work?
1 Answer, 1 is accepted
Thank you for your interest in NativeScript.
At the moment the `nativescript--` plugin supports only one SideDrawer per Page.This feature will be planned in some of the next plugin versions. You could keep track on the new features updates and fixes in our Release notes section. We also have dedicated "What's new" blog article which can be found here. you could also add feature request in the --sample repo, where the other people could vote for this functionality.
I hope this information helps
Regards,
nikolay.tsonev
Telerik by Progress