RadSideDrawer: Getting Started

This article explains how to create a simple RadSideDrawer with Angular.

By design the RadSideDrawer is designed to be placed as a single child in your component's HTML, this excludes the use of a <ActionBar><<ActionBar> which is not treated as a simple element by NativeScript and can be used with RadSideDrawer by placing it in the beginning of the HTML.

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 as explained here.

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.

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

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-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) 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;
}

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

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

.sideStackLayout {
    background-color: gray;
}

.sideTitleStackLayout {
    height: 56;
    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'