javascriptangularnativescriptangular2-nativescriptnativescript-telerik-ui

How to show sideDrawer over Action Bar in Telerik's UI for Nativescript using Angular2?


I was trying to add a Side Drawer from Telerik's UI for Nativescript using Angular2.

They have a directive called showOverNavigation which is a boolean that should do the work when setted up as "True" value, but it is currently not working on my project.

I'll attach my app.component.html code so maybe you can help me spotting any error in it.

<RadSideDrawer showOverNavigation="{{true}}>"
<StackLayout tkDrawerContent class="sideStackLayout">
    <StackLayout class="sideTitleStackLayout">
        <Label text="Navigation Menu"></Label>
    </StackLayout>
    <StackLayout class="sideStackLayout">
        <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
        <Label text="Social" class="sideLabel"></Label>
        <Label text="Promotions" class="sideLabel"></Label>
        <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
        <Label text="Important" class="sideLabel"></Label>
        <Label text="Starred" class="sideLabel"></Label>
        <Label text="Sent Mail" class="sideLabel"></Label>
        <Label text="Drafts" class="sideLabel"></Label>
    </StackLayout>
</StackLayout>
<StackLayout tkMainContent>
    <ActionBar class="actionBar" title="Home">
        <image src="~/res/icon.png" (tap)=openDrawer() stretch="none" ios.position="left" ></image>
    </ActionBar>
    <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
    <Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
</StackLayout>
</RadSideDrawer>

Please, tell me any additional information I could provide on the issue. Thanks in advance! =)


Solution

  • @Nick Iliev gave me the answer:

    "According to this issue here github.com/telerik/nativescript-ui-samples-angular/issues/26 the showOverNavigation is currently not available in Angular + {N} apps. Its related to this thread github.com/NativeScript/nativescript-angular/issues/394 so you might want to keep an eye on it."

    I guess this question is solved at the moment with this contribution.

    Thank you @Nick Iliev