11

I am trying to toggle a side nav menu, located at the top of my main App template using a button in a nested child component. I can't figure out how to get to the sidenav component in the parent to tell it to sidenav.open().

I know about @Input and @Output on a child component, but as I understand it, to use this I need to have some sort of DOM tag for the child component to attach these to? Such as:

<app>
  <sidenav-component #sidenav>...</sidenav-component>

  <child [someInput]="some_parent_var" (childOpensNav)="sidenav.open()"></child>
</app>

Tons of articles on how to do this. Problem is that I'm routing to this component so no <child> tag exists explicitly in the code. Rather my code is like this:

<app>
  <sidenav-component #sidenav>...</sidenav-component>

  <router-outlet></router-outlet>
</app>

If I have a child component that gets routed to, how do I do a sidenav.open() or somehow access a component in the parent from the child?

Some thoughts: I've done some research and thinking about a couple of approaches and not sure if they are correct or would even work...One approach being using the Injector service and trying to traverse up to the parent, but this feels wrong:

// child component
constructor(injector: Injector) {
  this.something = injector.parent.get(Something);
}

Or possibly creating a Service in the parent, somehow attached to the Sidenav component and then injecting this service into the child??

FireDragon
  • 9,325
  • 4
  • 27
  • 34
  • This is literally exactly what im trying to do. I can't believe I found your question. Thanks. Hopefully I'll scroll down and get a good answer. – krummens Jun 17 '17 at 14:25

2 Answers2

9

The easiest and cleanest way is indeed to leverage a service.

The service how it could look like:

export class DomService {
    sidebarVisible: boolean = true;

    showSidebar() {
        sidebarVisible = true;
    }

    hideSidebar() {
        sidebarVisible = false;
    }

    toggleSidebar() {
        sidebarVisible = !sidebarVisible;
    }
}

In your bootstrap call add the service to the list of providers:

bootstrap(App, [
    // other providers
    DomService
]);

In the components (maybe in app.ts but also in your sidenav.ts) where you want to show/hide the sidebar add the service for injection:

constructor(private _domService: DomService) {

}

In your template, where you want to toggle/show/hide you can do now:

<sidenav-component *ngIf="_domService.sidebarVisible">...</sidenav-component>

<div id="toggle-sidebar" (click)="_domService.toggleSidebar()">toggle</div>
Maximilian Riegler
  • 22,720
  • 4
  • 62
  • 71
  • 2
    Intersting, and thank you. I will try this out soon. It's counterintuitive though to have to create a service to access DOM elements when there's `@ViewChild` available, it seems like Angular 2 could provide something like a `@ViewParent` or something to make it more intuitive? Will let you know how it goes for me though. Also, how did you get to this answer/come to know that this is "best practices"? Thanks! – FireDragon Jun 12 '16 at 18:32
  • Well, basically you can do this with [input and output properties](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#input-and-output-properties) on your `sidenav-component` tag, but if you need it from a few other places, this will get really messy. – Maximilian Riegler Jun 12 '16 at 18:59
0

I like the accepted answer, seems a more robust Angular way to do it properly (especially if you are going to be adding more options).

However, I wanted quick dirty access to a global element by Id. Everybody talks about using @ViewChild but I want to walk UP the tree. I just went back to school and used this in the component method:

document.getElementById('nav-panel').className = 'hide';

If we want multiple copies of this to work (e.g. left and right side menus) we need to inject something down the children so they know which Id to look for.

Etherman
  • 1,777
  • 1
  • 21
  • 34