Sidedrawer not working on a Groceries template based app

plugins

#1

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

<StackLayout>

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

    <page-router-outlet>
    </page-router-outlet>
</StackLayout>

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

@Component({
  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;
        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();
    }

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

  hello() {
    console.log('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.


#2

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:

<RadSideDrawer>
    <RadSideDrawer.drawerContent>
        // shared content here
    </RadSideDrawer.drawerContent>
</RadSideDrawer>

#3

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.


#4

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.

Thanks,
TJ


#5

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


#6

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.