CODEWITHSUNDEEP
androidangularjsnativescriptangular2-nativescript
Vladimir
Vladimir

Reputation: 1789

How to add side drawer? [Nativescript + Angular]

In main module I added this:

import {SIDEDRAWER_DIRECTIVES} from "nativescript-telerik-ui/sidedrawer/angular";
...
declarations: [
        SIDEDRAWER_DIRECTIVES,
        AppComponent,
        ...AppComponents
]

xml part for app.component.html:

<RadSideDrawer [drawerLocation]="currentLocation" 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>
    </StackLayout>
    <StackLayout tkMainContent>
        <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
        <Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
    </StackLayout>
</RadSideDrawer>

When I try to run it I get error:

An uncaught Exception occurred on "main" thread. com.tns.NativeScriptException: Calling js method onCreateView failed

TypeError: Cannot read property 'android' of undefined File: "file:///data/data/org.nativescript.nativescript/files/app/tns_modules/nativescript-telerik-ui/sidedrawer/sidedrawer.js, line: 91, column: 39

StackTrace: Frame: function:'RadSideDrawer.initOldDrawer', file:'file:///data/data/org.nativescript.nativescript/files/app/tns_modules/nativescript-telerik-ui/sidedrawer/sidedrawer.js', line: 91, column: 40 Frame: function:'RadSideDrawer._createUI', file:'file:///data/data/org.nativescript.nativescript/files/app/tns_modules/nativescript-telerik-ui/sidedrawer/sidedrawer.js', line: 147, column: 18 Frame: function:'View._onContextChanged', file:'file:///data/data/org.nativescript.nativescript/files/app/tns_modules/ui/core/view.js', line: 202, column: 14 Frame: function:'View._onAttached', file:'file:///data/data/org.nativescript.nativescript/files/app/tns_modules/ui/core/view.js', line: 1

Anyone know what is a problem?

Upvotes: 1

Views: 1630

Answers (2)

leoncc
leoncc

Reputation: 233

A faster way to fix an issue like this is to use NativeScript Sidekick. Choose to create a new project. One of the templates features a SideDrawer.

Upvotes: 0

marcan2020
marcan2020

Reputation: 609

  • Make this import:

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

  • Add it to your imports:

imports: [ NativeScriptUISideDrawerModule, ... ]

Now, your side drawer should work fine.

Upvotes: 1

Related Questions