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.


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

tns plugin add nativescript-ui-sidedrawer


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

    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;

    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() {

    public onCloseDrawerTap() {
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 TelerikUI-SideDrawer-Getting-Started

Figure 2. RadSideDrawer's 'tkDrawerContent'

TelerikUI-SideDrawer-Getting-Started TelerikUI-SideDrawer-Getting-Started


Want to see this scenario in action?
Check our SDK examples repository on GitHub. You will find this and a lot more practical examples with NativeScript UI.

Related articles you might find useful: