RadSideDrawer not working Nativescript angular 2

Question

I am new to nativescript as i am learning to implement navigation drawer i just end up with some errors.

register.html

<ActionBar title="Custom Title">

        <ActionItem ios.systemIcon="9" android.systemIcon="ic_menu_share_holo_light" (tap)="openDrawer()"></ActionItem>
    </ActionBar>
<RadSideDrawer #drawer>
        <template drawerSide>
            <StackLayout class="p bgc-white">
                <ListView  row="1">
                    <template let-item="item" let-i="index">
                        <StackLayout>
                            <Label text="WWW" class="page-name" ></Label>
                        </StackLayout>
                    </template>
                </ListView>
            </StackLayout>
        </template>
        <template drawerMain>
            <StackLayout class="m">
                <user-list></user-list>
            </StackLayout>
    </template>
</RadSideDrawer>

register.component.ts

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

@Component({
    selector: "register",
    templateUrl :"./pages/register/register.html"
})

export class RegisterComponent 
{
   @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
    private drawer: SideDrawerType;
    constructor (private _changeDetectionRef: ChangeDetectorRef) {

    }

  ngAfterViewInit() {
       console.log(" FFFFF");
        this.drawer = this.drawerComponent.sideDrawer;

        this._changeDetectionRef.detectChanges();
    }
   public openDrawer()
   {
       this.drawer.toggleDrawerState();
   }
}

the following is the log i am getting

promiseReactionJob@[native code] CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3481:36: ERROR CONTEXT:

CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3482:36: [object Object]

CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:344:22: Error: Error in :0:0 caused by: undefined is not an object (evaluating 'this.drawerComponent.sideDrawer')

You can remove that #drawer from the <RadSideDrawer> tag. And not that it is related to your issue, but to help your IDE out you can have your class implement AfterViewInit. — Eddy Verbruggen

Shawn Shawn · Accepted Answer · 2017-04-11T12:54:40

Did you import the NativeScriptUiSideDrawerModule into your app.module?

Something like this:

import { NativeScriptUISideDrawerModule } from 'nativescript-telerik-ui/sidedrawer/angular';

@NgModule({ 
    bootstrap: [ 
        AppComponent 
    ], 
    imports: [ 
        CoreModule, 
        NativeScriptModule, 
        PagesModule, 
        NativeScriptUISideDrawerModule // RIGHT HERE 
    ], 
})
export class AppModule { }

It's outlined in the Getting Started docs: http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/getting-started

RadSideDrawer not working Nativescript angular 2

1 Answers