NativeScript Angular

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> <!-- ActionBar can be used with RadSideDrawer on the root level -->
 <RadSideDrawer></RadSideDrawer> <!-- RadSideDrawer should be single child (not counting ActionBar)-->
    It is NOT allowed to have other elements on the root level with RadSideDrawer


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. For example:

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


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>
    <GridLayout tkDrawerContent rows="56, *" class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
            <Label text="Navigation Menu"></Label>
        <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 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 { RadSideDrawerComponent } from "nativescript-ui-sidedrawer/angular";
import { RadSideDrawer } from 'nativescript-ui-sidedrawer';

    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;

    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;

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