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?