Toggle global sideDrawer from another component


#1

Hi,

I have a global side drawer component so I can use it on different views in my app. I want to toggle it with a button from another component, but all I get is
ERROR TypeError: Cannot read property 'toggleDrawerState' of undefined
or
JS: ERROR Error: Uncaught (in promise): Error: StaticInjectorError[SideDrawerPageComponent]: JS: StaticInjectorError[SideDrawerPageComponent]: JS: NullInjectorError: No provider for SideDrawerPageComponent! [...].

In my side drawer component I have this function :

  toggleDrawerState() {
    this.drawer.showDrawer();
  }

in the other component :
I just want to call toggleDrawerState :sweat_smile:
I tried several things in order to export/import the function but without success … Does someone knows if that’s possible? how should it be done ?


#2

It depends on whether or not your pages are children of the sidedrawer component. If that’s the case (like this then you can simply inject the sidedrawer component in the page component (where you want to call that toggle method) like this.

Note that this example app is NativeScript 4, where the SideDrawer is a top level component, but the approach is exactly the same in the previous NativeScript 3 version.


#3

Thank you for providing an example, i did not think page-router-outlet could be put inside the sidedrawer with tkMainContent.
I don’t know if I could do that though as I have 2 SideDrawers in my app, in shared components. (so I have a selector and just put the tag inside .html pages)
I’ve tried to import the SideDrawer component and declare it inside the constructor of the other component but it does not work in my case (second error pops up).


#4

ok I’ve found a way :