Nativescript-angular: new clearHistory routing and RadSideDrawer

[NathanWalker]

When using the new clearhistory routing which is awesome btw!!... the RadSideDrawer unfortunately will not open it's drawer over the top of the new route page... you can toggle it open/close all day long, but it will not show it's side drawer over top of the routed to page.

<ActionBar title="App">
  <ActionItem (tap)="drawerService.toggle()" *ngIf="(authService.state$ | async)?.loggedIn">
    <Button class="fa" [text]="'fa-bars' | fonticonPure"></Button>
  </ActionItem>
</ActionBar>
<RadSideDrawer #drawer [transition]="sideDrawerTransition" selectionBehavior="None" top="0" left="0" width="100%" height="100%">
  <template drawerSide>
    <GridLayout class="side-drawer" rows="auto, *, auto" columns="*">
      <StackLayout class="side-primary" row="0" col="0">
        <GridLayout columns="auto, *" rows="60" class="side-item" [ngClass]="{'item-active': activeRoute.search}" [nsRouterLink]="['/']" clearHistory="true" pageTransition="slideLeft">
          <Label text="&#xf002;" class="fa" row="0" col="0"></Label>
          <Label text="Search" row="0" col="1"></Label>
        </GridLayout>
        <GridLayout columns="auto, *" rows="60" class="side-item" [ngClass]="{'item-active': activeRoute.playlist}" [nsRouterLink]="['/playlist']" clearHistory="true" pageTransition="slideLeft">
          <Label [text]="'fa-list' | fonticon" class="fa" row="0" col="0"></Label>
          <Label text="Playlists" row="0" col="1"></Label>
        </GridLayout>
        <GridLayout columns="auto, *" rows="60" class="side-item" [ngClass]="{'item-active': activeRoute.shoutout}" [nsRouterLink]="['/shoutout']" clearHistory="true" pageTransition="slideTop">
          <Label [text]="'fa-microphone' | fonticon" class="fa" row="0" col="0"></Label>
          <Label text="ShoutOuts" row="0" col="1"></Label>
        </GridLayout>
      </StackLayout>
      <StackLayout class="side-bottom" row="2" col="0">
        <GridLayout columns="auto, *" rows="60" class="side-item" [ngClass]="{'item-active': activeRoute.general}" [nsRouterLink]="['/general']" clearHistory="true" pageTransition="slideBottom">
          <Label [text]="'fa-cog' | fonticon" class="fa" row="0" col="0"></Label>
          <Label text="Settings" row="0" col="1"></Label>
        </GridLayout>
        <GridLayout columns="auto, *" rows="60" class="side-item" [ngClass]="{'item-active': activeRoute.help}" [nsRouterLink]="['/help']" clearHistory="true" pageTransition="slideBottom">
          <Label [text]="'fa-question-circle' | fonticon" class="fa" row="0" col="0"></Label>
          <Label text="Help" row="0" col="1"></Label>
        </GridLayout>
        <GridLayout columns="auto, *" rows="60" class="side-item" [ngClass]="{'item-active': activeRoute.about}" [nsRouterLink]="['/about']" clearHistory="true" pageTransition="slideBottom">
          <Label [text]="'fa-info-circle' | fonticon" class="fa" row="0" col="0"></Label>
          <Label text="About ShoutOutPlay" row="0" col="1"></Label>
        </GridLayout>
      </StackLayout>
    </GridLayout>
  </template>
  <template drawerMain>
    <page-router-outlet></page-router-outlet>
  </template>
</RadSideDrawer>

This behavior can be observed on this branch: https://github.com/NathanWalker/ShoutOutPlay/tree/router-clear-history

[vakrilov]

The page-router-outlet loads another page that will has no side-drawer on it.
Any content outside the page-router-outlet will not be included in the new page you are navigating to.

[NathanWalker]

Maybe the solution would be to use router-outlet instead? However I guess using that will have to wait until this is cleared: https://github.com/NativeScript/nativescript-angular/issues/343 or more specifically this issue: https://github.com/telerik/nativescript-ui-samples-angular/issues/13

Thanks for the input and I'm excited to see this fixed in ui repo! @VladimirAmiorkov my eyes are on you :) Thank you for your attention to this highly desired scenario.

[VladimirAmiorkov]

Hi @NathanWalker ,

I have committed a fix for the router-outlet and if all is well it should be available in the next official release of nativescript-telerik-ui.

[NathanWalker]

I got this working 👍 Thanks again @VladimirAmiorkov