Sidedrawer not working on a Groceries template based app



My idea is putting all the html, css and logic of the sidedrawer into the app.component (in order to go DRY).
And then on every page/component just extends the app.component, O don’t know if it’s the recommended way to go.

xo app.html is


        <NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton>
        <ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()" ios.position="left">
        <Label class="action-bar-title" text="MyApp"></Label>


And that’s my app.component

import { DrawerTransitionBase, SlideInOnTopTransition } from "nativescript-pro-ui/sidedrawer";
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-pro-ui/sidedrawer/angular";
import { RadSideDrawer } from 'nativescript-pro-ui/sidedrawer';

  selector: "main",
  templateUrl: "./app.html",
  styleUrls: ['./app.css']
export class AppComponent  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() {

public onDrawerButtonTap() { console.log('tap button'); }

  hello() {


So I simply add to the page component class just the “extends AppComponent” and the super() to its constructor.

After doing that my problems are:

  1. the sidedrawer is opened by default

  2. when I press close :
    JavaScript error:
    undefined:309:40: JS ERROR TypeError: co.onCloseDrawerTap is not a function. (In ‘co.onCloseDrawerTap()’, ‘co.onCloseDrawerTap’ is undefined)

The funny thing is that the hello() function (a console.log(‘hello) ) from LoginComponent is working on the login:onInit() as its extended from AppComponent.


Disclaimer: I’m not an Angular guy, but I do have some experience with the SideDrawer. I’m wondering if the problem is with this snippet:

If you are sharing drawer content across multiple views, that shared content has to go in the <RadSideDrawer.drawerContent> tag, like so:

        // shared content here


The problem was that the Groceries template was outdated (and think that the online version still it is) and it was incompatible with the current SideDrawer docs. Also I got many problems with Visual Code, Gulp and Graddle. So it was the perfect storm & nightmare.


Hi @arcovoltaico,

Sorry you hit problems here :frowning_face: Do you know which Groceries template is out of date? If so we’ll want to get that cleaned up asap.



The one I cloned on January don’t remember the day. It was conflicting with te side drawer template and doc.
Was a nightmare.


Ok sorry to hear that. If you run across a template that’s out of date in the future feel free to ping us on GitHub or in this forum so we can clean it up asap.