0

I used code from nativescript-ui-samples-angular repo for RadSideDrawer (side menu). It works perfectly, but when I tried wrapping it all in a separate component which I then add into other component via selector it falls flat.

@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;

ngAfterViewInit() {
    this.drawer = this.drawerComponent.sideDrawer;
    this._changeDetectionRef.detectChanges();
}

It says

Cannot read property 'sideDrawer' of undefined

Am I missing something? The problem is not in the side-menu itself, it's the wrapping it into a reusable component.

Zoidy
  • 362
  • 4
  • 21
  • Not certain, but I think Nathan Walker uses the side drawer in ShoutOutPlay (https://github.com/NathanWalker/ShoutOutPlay/tree/development/app) might try digging around and see if he's reusing it across different sections of the app. – Brad Martin Mar 02 '17 at 01:57

1 Answers1

1

Apart from the approach with getting reference via RadSideDrawerComponent you can also use Angular id and pass it to your @ViewChild directive as follows

file.component.html (create the unique id for your drawer)

<RadSideDrawer #myDrawer>

file.component.ts

@ViewChild("myDrawer") public drawerComponent: RadSideDrawerComponent;

Test project can be found here (look in app/home/home.component.ts)

Nick Iliev
  • 9,610
  • 3
  • 35
  • 89
  • I was still trying to use the old way of using the RadSideDrawer (where the content of the page was not wrapped insided of the RadSideDrawer itself). So my approach was flawed. With your tip I was able to get the reference, but I had to rethink the way I used the component itself. Accepting answer. – Zoidy Mar 07 '17 at 16:09