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

plugins

#1

Hi,

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]

FYI,
My codes are,
app.component.ts

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';

@Component({
    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;
        this._changeDetectionRef.detectChanges();
    }

    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() {
        this.drawer.showDrawer();
    }

    public onCloseDrawerTap() {
       this.drawer.closeDrawer();
    }
}

app.component.html

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

How to handle this error, Please suggest.

Thanks in advance.


#2

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.

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

Hope this helps. :smiley:


#3

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.


#4

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!


#5

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


#6

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