Page-router-outlet to get the higher component - nativescript

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=""></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="" 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="" 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="" 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="" 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="" 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="" 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=""></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;