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.
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">
<ScrollView>
<StackLayout class="sideStackLayout">
<!-- content of menu -->
</StackLayout>
</ScrollView>
</StackLayout>
</StackLayout>
<StackLayout tkMainContent>
<ActionBar title="">
<!-- this is your action bar content -->
</ActionBar>
<ng-content></ng-content>
</StackLayout>
</RadSideDrawer>
The TS part will be based on the example SideDrawer component. Lets say that its declared like that (please note to change your paths in @Component to actual files as I ripped that from actual project - so that template is placed for me in components/header/header.component.html and will be base for your-header directive):
@Component({
selector: "your-header",
templateUrl: "components/header/header.component.html",
styleUrls: ['components/header/header.css'],
})
In your actual page (again showing it on my project login page) you pass this new directive HeaderComponent
import {HeaderComponent} from "../../header/header.component";
@Component({
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
<your-header>
<StackLayout class="content">
<label class="h1 left" text="Please Login"></label>
</StackLayout>
</your-header>
What it will do is spawn content of you page always in sidedrawer content section (ng-content in the SideDrawer template), like the normal directives in angular works.
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, {})],
SIDEDRAWER_PROVIDERS,
], { 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 (properly passing html through ng-content)
Note that it is form 1.3.x SideDrawer and I belive there was change in 1.4.x that would change your bootstrap file obviously but the handling stays the same.
Note that everything needs to be wrapped in the SideDrawer template otherwise you will have two view drawers and it will fall flat (SideDrawer has its own "drawing" method). And if you dont want the SideDrawer on some page you just do not include the directive.
Also as this is normal directive you can pass staff to you header <your-header variable="variableValue">. You can switch this way between top page align models and options for ActionBar.
