NativeScript: toggleDrawerState not a function error

Question

I'm trying to create a sample application in native script. I used RadSideDrawer for sidemenu in the following way by referencing http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started :

<RadSideDrawer [transition]="RevealTransition" #drawer>
  <StackLayout tkDrawerContent class="sideStackLayout">
      <StackLayout class="sideTitleStackLayout">
          <Label text="Navigation Menu"></Label>
      </StackLayout>
      <StackLayout class="sideStackLayout">
          <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
          <Label text="Social" class="sideLabel"></Label>
          <Label text="Promotions" class="sideLabel"></Label>
          <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
          <Label text="Important" class="sideLabel"></Label>
          <Label text="Starred" class="sideLabel"></Label>
          <Label text="Sent Mail" class="sideLabel"></Label>
          <Label text="Drafts" class="sideLabel"></Label>
      </StackLayout>
  </StackLayout>
  <StackLayout tkMainContent>
    <GridLayout rows="*">
    <page-router-outlet ></page-router-outlet>
    <ActivityIndicator #activityIndicator horizontalAlignment="center" verticalAlignment="center"  width="100" height="100" row="0"></ActivityIndicator>
  </GridLayout>
  </StackLayout>
</RadSideDrawer>

In my app.component.ts, I've given :

import {RadSideDrawer} from "nativescript-telerik-ui/sidedrawer";

@ViewChild("drawer") drawer : ElementRef;

and

public toggleDrawer(){
        let drawer = <RadSideDrawer>this.drawer.nativeElement;
        drawer.toggleDrawerState();
    }

The problem is that whenever I'm trying to execute toggleDrawer(), I'm getting an error :

 drawer.toggleDrawerState not a function.

What could be gone wrong? I'm getting a this.drawer as an [object Object] and this.drawer.nativeElement as ProxyViewContainer(5), that means it is identifying the element, but cannot call toggleDrawerState();

Also the style is distorted now, it is now listing the tkDrawerContent in the main view and I'm not able to see the original page contents I specified in tkMainContent.

Answer 1

There are some things to consider with RadSideDrawer (in N+Angular2 project).

1.) You have a special import for typings

import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui-pro/sidedrawer/angular";

@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;

2.) You need to implement ChangeDetectorRef in the constructor of your component

import { Component, ElementRef, ViewChild, Injectable, OnInit, ChangeDetectorRef } from "@angular/core";
.....
constructor(private page: Page, private _changeDetectionRef: ChangeDetectorRef) {
        super();
}

3.) In ngAfterViewInit use the ChangeDetectorRef like this

ngAfterViewInit() {
    this.drawer = this.drawerComponent.sideDrawer;
    this._changeDetectionRef.detectChanges();
}

4.) Finally uses the drawer method is trivial

public toggleDrawer() {
    this.drawer.toggleDrawerState();
}

.....
<Button text="TOGGLE DRAWER" (tap)=toggleDrawer()></Button>

The full example for using RadSideDrawer with angular can be found here