Replicate Ionic2 style Left Side Menu in NativeScript with Angular2

Question

Ionic2 gives nice template with left menu slider as per image:

Is there any NativeScript way of doing this with Angular2?

I installed npm i nativescript-telerik-ui in to the project and as per example http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started pleased the html code in to my file :

<RadSideDrawer exampleTitle toggleNavButton>
    <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>

But once I run tns run android --emulator I can't see Deawer appeared on the screen.

Answer 1

Maybe you have forgotten to include the SIDEDRAWER_DIRECTIVES into the declarations of the bootstrapped @NgModule.

You can see full details on how to use RadSideDrawer or any of the other UI elements of the nativescript-telerik-ui plugin in your {N} + Angular application here. For specific details regarding the RadSideDrawer you can take a look at its official documentation here.