generic side-menu component

Question

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.

Answer 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)