Cannot read property 'sideDrawer' of undefined in Nativescript-ui-sidedrawer




I have tried nativescript-ui-sideDrawer by follows the example nativescript-ui-samples-angular.

Its builds and launched successfully. But while tried to swipe to open sidedrawer that time got following error.

JS: ERROR TypeError: Cannot read property 'sideDrawer' of undefined
JS: ERROR CONTEXT [object Object]

My codes are,

import { Component, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef } from "@angular/core";
import { Page } from "ui/page";
import { ActionItem } from "ui/action-bar";
import { Observable } from "data/observable";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular";
import { RadSideDrawer } from 'nativescript-telerik-ui/sidedrawer';

    selector: "ns-app",
    templateUrl: "app.component.html",

export class AppComponent implements AfterViewInit, OnInit { 
    private _mainContentText: string;

    constructor(private _changeDetectionRef: ChangeDetectorRef) {

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

    ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;

    ngOnInit() {
        this.mainContentText = "SideDrawer for NativeScript can be easily setup in the HTML definition of your page by defining tkDrawerContent and tkMainContent. The component has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.";

    get mainContentText() {
        return this._mainContentText;

    set mainContentText(value: string) {
        this._mainContentText = value;

    public openDrawer() {

    public onCloseDrawerTap() {


<RadSideDrawer tkExampleTitle tkToggleNavButton>
    <StackLayout tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
            <Label text="Navigation Menu"></Label>
        <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>
        <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" (tap)="onCloseDrawerTap()"></Label>
    <StackLayout tkMainContent>
        <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
        <Button text="OPEN DRAWER" (tap)="openDrawer()" class="drawerContentButton"></Button>

How to handle this error, Please suggest.

Thanks in advance.


Hello @kumaran. Did you import NativeScriptUISideDrawerModule in your app.module.ts?
Try this bellow:

import { NativeScriptUISideDrawerModule } from 'nativescript-pro-ui/sidedrawer/angular'
and add it in the imports secction.

TIP: It is recomended to use id-selector instead of type-selector with ViewChilds.

@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
@ViewChild('drawerComponent') public drawerComponent: RadSideDrawerComponent;
<RadSideDrawer #drawerComponent tkExampleTitle tkToggleNavButton>

Hope this helps. :smiley:


Hi Kumaran, have you solved this issue?

These codes work well in the example, but it fails in my project, event after i importing the necessary module.


Hey @wanpeng2008, I have tired but cannot fix the issue.

Finally i used drawer-navigation App starter template which will freely avail in NativeScript Marketplace.

Hope it helps!


Thanks @kumaran.
I followed your suggestion and it works fine now.


i find out that when i remove ActionItems from the ActionBar, previous codes work.
Hope this can help