IvRRimUm IvRRimUm - 1 year ago 610
AngularJS Question

Nativescript - Make Telerik Sidedrawer in all Views

I've successfully got the Telerik Side-drawer working in one view, but I'm stuck with making it into a component I can use globally.

I'd like to avoid copy and pasting it into every view, so my question is how can I turn it into a reusable component.

Answer Source

So when you use the page-router-outlet

Do not modify the main app template <page-router-outlet></page-router-outlet> - you might feel otherwise but its fine (the way the page router outlet works would add the side drawer only to the main page - documentation might be misleading but it works like that).

Now create a component that will be you directive that contains the side drawer, thats the template:

<RadSideDrawer #drawer>
    <StackLayout tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">

                <StackLayout class="sideStackLayout">

                <!-- content of menu -->


    <StackLayout tkMainContent>
        <ActionBar title="">
              <!-- this is your action bar content -->

The TS part will be based on the example SideDrawer component. Lets say that its declared like that (please not to change your paths in @Component to actual files as I ripped that from actual project):

    selector: "your-header",
    templateUrl: "components/header/header.component.html",
    styleUrls: ['components/header/header.css'],

Now in you actual page you pass this new directive HeaderComponent

    selector: "login-page",
    templateUrl: "components/user/login/login.component.html",
    styleUrls: ['components/user/login/login.css'],
    directives: [HeaderComponent]

And you wrap the login.component.html in the directive

    <StackLayout class="content">
        <label class="h1 left" text="Please Login"></label>

What it will do is spawn content of you page always in sidedrawer content section, like the normal directives in angular work.

The only missing thing would be adding the Sidedrawer directive itself in your bootstrap initiation.

import {nativeScriptBootstrap} from "nativescript-angular/application";
import {nsProvideRouter} from "nativescript-angular/router";
import {RouterConfig} from "@angular/router";
import {AppComponent} from "./app.component";
import {SIDEDRAWER_PROVIDERS} from "nativescript-telerik-ui/sidedrawer/angular";

import {LandingComponent} from "./components/landingPage/landing.component";
import {LoginComponent} from "./components/user/login/login.component";

import {ExperimentalComponent} from "./components/experimental/experimental.component";

export const AppRoutes: RouterConfig = [
    { path: "", component: LandingComponent },
    { path: "login", component: LoginComponent },


nativeScriptBootstrap(AppComponent, [
    [nsProvideRouter(AppRoutes, {})],
], { startPageActionBarHidden: true });

If something does not work its that u made mistake in embedding the directive, you can throw out the sidedrawer and add just some label there, till you get it working.