Page-router-outlet to get the higher component

Question

I am working on nativescript angular project that using RadSideDrawer

And here my main-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { MainComponent } from "~/app/components/main/main.component";

const routes: Routes = [
  {
    path: "",
    component: MainComponent,
    children: [
      { path: "", redirectTo: "/home", pathMatch: "full" },
      { path: "home", loadChildren: "~/app/components/home/home.module#HomeModule" },
      {
        path: "browse",
        loadChildren: "~/app/components/browse/browse.module#BrowseModule"
      },
      {
        path: "search",
        loadChildren: "~/app/components/search/search.module#SearchModule"
      },
      {
        path: "featured",
        loadChildren: "~/app/components/featured/featured.module#FeaturedModule"
      },
      {
        path: "settings",
        loadChildren: "~/app/components/settings/settings.module#SettingsModule"
      }
    ]
  }
];

@NgModule({
  imports: [NativeScriptRouterModule.forChild(routes)],
  exports: [NativeScriptRouterModule]
})
export class MainRoutingModule {}

here is my main.component.html

<RadSideDrawer [drawerTransition]="sideDrawerTransition">
    <GridLayout tkDrawerContent rows="auto, *" class="sidedrawer sidedrawer-left">
        <StackLayout row="0" class="sidedrawer-header">
            <Label class="sidedrawer-header-image fa" text="&#xf2bd;"></Label>
            <Label class="sidedrawer-header-brand" text="User Name"></Label>
            <Label class="footnote" text="username@mail.com"></Label>
        </StackLayout>

        <ScrollView row="1">
            <StackLayout class="sidedrawer-content">
                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/home')"
                    (tap)="onNavItemTap('/home')">
                    <Label col="0" text="&#xf015;" class="fa"></Label>
                    <Label col="1" text="Home" class="p-r-10"></Label>
                </GridLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/browse')"
                    (tap)="onNavItemTap('/browse')">
                    <Label col="0" text="&#xf1ea;" class="fa"></Label>
                    <Label col="1" text="Browse" class="p-r-10"></Label>
                </GridLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/search')"
                    (tap)="onNavItemTap('/search')">
                    <Label col="0" text="&#xf002;" class="fa"></Label>
                    <Label col="1" text="Search" class="p-r-10"></Label>
                </GridLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/featured')"
                    (tap)="onNavItemTap('/featured')">
                    <Label col="0" text="&#xf005;" class="fa"></Label>
                    <Label col="1" text="Featured" class="p-r-10"></Label>
                </GridLayout>

                <StackLayout class="hr-light"></StackLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/settings')"
                    (tap)="onNavItemTap('/settings')">
                    <Label col="0" text="&#xf013;" class="fa"></Label>
                    <Label col="1" text="Settings" class="p-r-10"></Label>
                </GridLayout>
                <GridLayout columns="auto, *" class="sidedrawer-list-item" (tap)="signOut()">
                    <Label col="0" text="&#xf013;" class="fa"></Label>
                    <Label col="1" text="Signout" class="p-r-10"></Label>
                </GridLayout>
            </StackLayout>
        </ScrollView>
    </GridLayout>
    <page-router-outlet tkMainContent class="page page-content"></page-router-outlet>
</RadSideDrawer>

here is my app-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { AuthGuard } from "~/app/shared/services/auth-guard.service";
import { LogGuard } from "~/app/shared/services/log-guard.service";
const routes: Routes = [
  {
    path: "",
    loadChildren: "~/app/components/main/main.module#MainModule",
    canActivate: [AuthGuard]
  },
  {
    path: "login",
    loadChildren: "~/app/components/login/login.module#LoginModule",
    canActivate: [LogGuard]
  },
  {
    path: "register",
    loadChildren: "~/app/components/register/register.module#RegisterModule",
    canActivate: [LogGuard]
  }
];

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule]
})
export class AppRoutingModule {}

and here my app.component.html

<app-no-connection></app-no-connection>
<page-router-outlet></page-router-outlet>

and here my home.component.html

<ActionBar class="action-bar">
    <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="Home"></Label>
</ActionBar>

<GridLayout class="page page-content">
    <Label class="page-icon fa" text="&#xf015;"></Label>
    <Label class="page-placeholder" text="<!-- Page content goes here -->"></Label>
</GridLayout>

and here my home.component.ts

import { Component, OnInit } from "@angular/core";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import * as app from "tns-core-modules/application";

@Component({
  selector: "Home",
  moduleId: module.id,
  templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
  constructor() {
    // Use the component constructor to inject providers.
    console.log("ini home");
  }

  ngOnInit(): void {
    // Init your component properties here.
  }

  onDrawerButtonTap(): void {
    console.log("tapped side bar");
    const sideDrawer = <RadSideDrawer>app.getRootView();
    sideDrawer.showDrawer();
  }
}

my RadSideDrawer is not in app.component.html. It is in main.component.html. so in my app.component.html just has <page-router-outlet></page-router-outlet>. I did like that because I need to login first before get the MainComponent.

But. It doesn't work. my RadSideDrawer not shown. And I don't understand why i got this error ERROR TypeError: sideDrawer.showDrawer is not a function when i tap drawer on home.component.html Any suggestion please?

Answer 1

<RadSideDrawer [drawerTransition]="sideDrawerTransition" tkExampleTitle tkToggleNavButton>
    <StackLayout tkDrawerContent class="sideStackLayout">

            <!-- Your navigation drawer items  -->

    </StackLayout>

    <page-router-outlet tkMainContent></page-router-outlet>

</RadSideDrawer>



AppComponent

@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
    private drawer: RadSideDrawer;

  ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;
        this.drawer.gesturesEnabled = false;           // To disbale the drawer.
    }    

// Code to enable Drawer:

this.drawer.gesturesEnabled = true;



// Controll sidedrawer from Other Screen

sideDrawer = <RadSideDrawer>app.getRootView();
this.sideDrawer.gesturesEnabled = true;