Is there any way to create a SideDrawer in one Component and use it in multiple paces(Components) in nativescript?

Question

I am developing an app using NativeScript. I want to use RadSideDrawer. Whatever I understood from nativescript.org is that I have to write same code snippet in every component where I want to display drawer. Is this a good practice? Or is there any other way to do so?

Answer 1

1- You can use a component with content projection to show dynamic content. 2- You can use routing with page-router-outlet

First Solution:

mySideDrawer.component.html

<StackLayout tkMainContent>
    <ng-content></ng-content>
</StackLayout>

Home.component.ts

<GridLayout rows="*" height="1500px">
    <MySideDrawer #mySideDrawer>
        <Label fontSize="20" text="Component 1"></Label>
            <Button text="OPEN" (tap)="onOpen()"></Button>
            <Button text="Go to component 2" [nsRouterLink]="['/home/comp2']"></Button>
    </MySideDrawer>
</GridLayout>

full demo: https://play.nativescript.org/?template=play-ng&id=YmqaP3

Second Solution:

<RadSideDrawer>
    <StackLayout tkDrawerContent backgroundColor="gray">
       <!-- Side bar content -->
    </StackLayout>

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

</RadSideDrawer>