Fake multiple SideDrawers


#1

Hi guys,

I need multiple SideDrawers in my app. One coming from the left and another one coming from the right.

I understood that I can’t have this the easy way (https://www.telerik.com/forums/multiple-radsidedrawers-in-one-page).

So I was thinking of a different approach. How about using just a single SideDrawer, but with dynamic content?

My idea was to include a router-outlet (as placeholder):

drawer.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "gdb-drawer",
    moduleId: module.id,
    templateUrl: "./drawer.component.html",
    styleUrls: ["./drawer.component.css"]
})
export class DrawerComponent {
}

and the corresponding drawer.component.html

<router-outlet name="drawer-outlet" class="drawer"></router-outlet>

One of my pages is called “Pool”. And in Pool I integrated the RadSideDrawer as shown in many examples.

pool.component.html

<ActionBar class="action-bar">
    <ActionItem text="Open Main Drawer" (tap)="onMainDrawerButtonTap()" ios.position="left" android.position="left"></ActionItem>
    <ActionItem text="Open Filter Drawer" (tap)="onFilterDrawerButtonTap()" ios.position="right" android.position="right"></ActionItem>
    <Label class="action-bar-title" [text]="title"></Label>
</ActionBar>

<RadSideDrawer #drawer showOverNavigation="true" [drawerTransition]="sideDrawerTransition">
    <!--
    Use the tkDrawerContent directive to display the content of the app drawer on this page.
    -->
    <StackLayout tkDrawerContent>
        <gdb-drawer></gdb-drawer>
    </StackLayout>

    <!--
    Use the tkMainContent directive to display the content of the page when you have an app drawer.
    -->
    <StackLayout tkMainContent>
        <Label text="Page content"></Label>
    </StackLayout>
</RadSideDrawer>

The magic is supposed to happen in the script file. When I tap on one of the two buttons in the ActionBar, the corresponding (tap)-event-handler is supposed to navigate to a certain component (this component represents the “dynamic content” that I need) and inject the component’s view in the drawer’s router-outlet. Finally the (tap)-event-handler opens the drawer.

pool.component.ts

import { ActivatedRoute } from '@angular/router';
import { Component, OnInit, ViewChild } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { RadSideDrawerComponent } from "nativescript-pro-ui/sidedrawer/angular";

@Component({
    selector: "gdb-pool-component",
    moduleId: module.id,
    templateUrl: "./pool.component.html"
})
export class PoolComponent implements OnInit {

    @ViewChild("drawer") drawerComponent: RadSideDrawerComponent;

    constructor(
        private routerExtensions: RouterExtensions,
        private activatedRoute: ActivatedRoute
    ) { }

    ngOnInit(): void {
        // nothing to do so far
    }

    onMainDrawerButtonTap(): void {
        console.log("MainDrawerButton tapped");
        this.routerExtensions.navigate([{ outlets: { "drawer-outlet": ["mainDrawer"] } }], { relativeTo: this.activatedRoute });
        this.drawerComponent.drawerLocation = "Left";
        this.drawerComponent.sideDrawer.showDrawer();
    }

    onFilterDrawerButtonTap(): void {
        console.log("FilterDrawerButton tapped");
        this.routerExtensions.navigate([{ outlets: { "drawer-outlet": ["filterDrawer"] } }], { relativeTo: this.activatedRoute });
        this.drawerComponent.drawerLocation = "Right";
        this.drawerComponent.sideDrawer.showDrawer();
    }
}

When I run my app, I am not getting any errors anymore. But when I tap on one of the two buttons, the SideDrawer does not show up.

Unfortunately I am pretty new to both NativeScript + Angular. And maybe I got it all wrong. Maybe is just a bad idea? I am really stuck.

The best I could come up with is this: https://github.com/softwarea/gdb

So, if anybody could have a look at my code and point me in the right direction, I would very appreciate it.

Thanks!

I am running TNS 3.3.0.


#2

I’ve been testing something for he past half an hour and it seems to work nicely, its based on your idea. Its still messy currently but it works. Are you in the slack channel? if so, i could send you the test app i made to see if its what youre trying to do


#3

Great, just contacted you on slack.