RadSideDrawer Getting Started

This article explains how to create a simple RadSideDrawer with Angular. The code snippets from this section are available as a standalone demo application.

The RadSideDrawer is designed to be placed as a single child in your component's HTML. This rule excludes the use of a <ActionBar> which is not treated as a simple element by NativeScript and can be used with RadSideDrawer by placing it at the beginning of the HTML. For example:
 <ActionBar></ActionBar> 
 <RadSideDrawer></RadSideDrawer>

Installation

Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-sidedrawer

Initialization

Before proceeding, make sure that the NativeScriptUISideDrawerModule from the nativescript-ui-sidedrawer plugin has been imported in an ngModule in your app. For example:

import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
@NgModule({
    schemas: [NO_ERRORS_SCHEMA],
    imports: [
        ....
        NativeScriptUISideDrawerModule,
        ....
    ],
    declarations: [
        ....
    ]
})
export class SideDrawerExamplesModule { }

Demo.

The RadSideDrawer consists of two visual parts:

mainContent - the visual elements displayed in the host view where the drawer is shown.
drawerContent - the visual elements displayed in the side drawer.

Defining mainContent and drawerContent with Angular is done with the corresponding directives:

TKMainContent - used with the tkMainContent selector
TKDrawerContent - used with the tkDrawerContent selector

The following code snippet is a simple template with a basic setup for RadSideDrawer.

HTML
TypeScript
CSS

<RadSideDrawer tkExampleTitle tkToggleNavButton>
    <GridLayout tkDrawerContent rows="56, *" class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
            <Label text="Navigation Menu"></Label>
        </StackLayout>
        <ScrollView row="1">
            <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>
        </ScrollView>
    </GridLayout>
    <StackLayout tkMainContent>
        <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
        <Button text="OPEN DRAWER" (tap)="openDrawer()" class="drawerContentButton"></Button>
    </StackLayout>
</RadSideDrawer>

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

@Component({
    moduleId: module.id,
    selector: "tk-sidedrawer-getting-started",
    templateUrl: 'getting-started.component.html',
    styleUrls: ['getting-started.component.css']
})
export class SideDrawerGettingStartedComponent implements AfterViewInit, OnInit {
    private _mainContentText: string;

    constructor(private _changeDetectionRef: ChangeDetectorRef) {
    }

    @ViewChild(RadSideDrawerComponent, { static: false }) 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();
    }
}

button {
    font-size: 15;
    horizontal-align: center;
}

RadSideDrawer .drawerContentText {
    font-size: 13;
    padding: 10;
}

RadSideDrawer .drawerContentButton {
    margin: 10;
    horizontal-align: left;
}

.sideStackLayout {
    background-color: gray;
}

.sideTitleStackLayout {
    text-align: center;
    vertical-align: center;
}

.sideLabel {
    padding: 10;
}

.sideLightGrayLabel {
    background-color: lightgray;
}

Figure 1. RadSideDrawer's 'tkMainContent'

TelerikUI-SideDrawer-Getting-Started

Figure 2. RadSideDrawer's 'tkDrawerContent'