(tap) event that changes drawerLocation

[Bubble]

So i made a workaround by rendering both views in the same sideDrawer and toggling visibility of the content depending on the button i click.

What i need to do is to change drawerLocation from my component.

 

heres my current component:

 66   public openDrawer() {
 67     this.isNavigation = true;
 68     this.drawer.showDrawer();
 69   }
 70 
 71   public openSearch() {
 72     
 73     // I want something like this here
 74     this.drawer.drawerLocation = "Bottom";
 75     
 76     this.isNavigation = false;
 77     this.drawer.showDrawer();
 78   }

 

  1 <RadSideDrawer #drawer>
  2     <StackLayout tkDrawerContent class="sideStackLayout">
  3         <StackLayout class="sideStackLayout">
  4           <StackLayout [class]="isNavigation ? 'visible': 'hide'">
  5             <Label text="Dashboard" [nsRouterLink]="['/dashboard']" class="sideLabel"></Label>
  6             <Label text="My profile" [nsRouterLink]="['/profile', currentUserId.getValue()]" class="sideLabel"></Label>
  7             <Label text="Take a Picture" (tap)="takePicture()" class="sideLabel"></Label>
  8             <Label text="Take a Video" (tap)="takeVideo()" class="sideLabel"></Label>
  9             <Label text="Jobs" [nsRouterLink]="['/jobs']" class="sideLabel"></Label>
 10           </StackLayout>
 11           <StackLayout [class]="isNavigation ? 'hide': 'visible'">
 12             <Label text="Dashboard" [nsRouterLink]="['/dashboard']" class="sideLabel"></Label>
 13           </StackLayout>
 14         </StackLayout>
 15     </StackLayout>
 16     <StackLayout tkMainContent>
 17         <ActionBar  title="" class="actionbar-designed">
 18           <GridLayout horizontalAlignment="center" verticalAlignment="center">
 19               <Image src="res://avatar" horizontalAlignment="left" class="profile-avatar" [nsRouterLink]="['/profile', currentUserId.getValue()]"></Image>
 20               <Label horizontalAlignment="left" class="message-bubble" text="4"></Label>
 21 
 22               <GridLayout columns="auto, auto" horizontalAlignment="center" (tap)="openDrawer()">
 23                 <Label class="section-name" text="Dashboard"></Label>
 24                 <Label col="1" class="fa arrow-down" text="&#xf107;"></Label>
 25               </GridLayout>
 26 
 27               <Label horizontalAlignment="right" minWidth="35" class="fa search" (tap)="openSearch()" text="&#xf002;"></Label>
 28           </GridLayout>
 29         </ActionBar>
 30         <ng-content></ng-content>
 31     </StackLayout>
 32 </RadSideDrawer>

 

Thanks!

[Bubble]

<RadSideDrawer #drawer [drawerLocation]="drawerLocation">

 76     this.drawerLocation = "Bottom";

 

{NNG}

[Nick Iliev]

Hi Bubble Goos,

What you can do to change dynamically the location of your drawer is to create a two-way binding with your drawer property drawerLocation
e.g.

<RadSideDrawer [drawerLocation]="currentLocation">

Then use this imports 

import { SideDrawerLocation } from 'nativescript-telerik-ui-pro/sidedrawer';

import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui-pro/sidedrawer/angular";
import { Component, ElementRef, ViewChild, Injectable, OnInit, ChangeDetectorRef } from "@angular/core";


Declare your private static property

private static currentLocationroperty = new Property(
    "currentLocation",
    "SidedrawerPositionComponent",
    new PropertyMetadata(
        undefined,
        PropertyMetadataSettings.None));

which defines the public property currentLocation

Implement OnInit for your component and in ngOnInit declare the initial value of for your drawer location

ngOnInit() {
    this.currentLocation = SideDrawerLocation.Left;
}

now the last thing you need to do is to attach the logic for changing the position where needed.

public openSearch() {
    this.currentLocation = SideDrawerLocation.Bottom;
}

The example above is using some advanced techniques like PropertyMetaData so if you need to see a working example on how to change your side drawer location via code behind you can refer to this sample application.

Regards,
Nikolay Iliev
Telerik by Progress