(tap) event that changes drawerLocation

Thread is closed for posting
3 posts, 0 answers
  1. Bubble
    Bubble avatar
    3 posts
    Member since:
    Oct 2016

    Posted 03 Oct 2016 Link to this post

    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   }
     71   public openSearch() {
     73     // I want something like this here
     74     this.drawer.drawerLocation = "Bottom";
     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>
     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>
     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>



  2. Bubble
    Bubble avatar
    3 posts
    Member since:
    Oct 2016

    Posted 03 Oct 2016 in reply to Bubble Link to this post

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

     76     this.drawerLocation = "Bottom";



  3. Nikolay Iliev
    Nikolay Iliev avatar
    351 posts

    Posted 03 Oct 2016 Link to this post

    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
    <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(
        new PropertyMetadata(
    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.

    Nikolay Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top