[Sidenav] Open sidenav from another component

[marianharbist]

Is it possible to have sidenav in separated component?

I have one component where is some content and button which if I click it opens the sidenav that is in another component (just sidenav is there). I tried that to implement with event emitter but not successfuly and I see that when sidenav is opened, it is showing under the layer of my content in first component. Maybe it is because the content is not in md-sidenav-content? I tried to set z-index but nothing happend. Is it possible? thanks

I need to have sidenav code separated in another component because it is my bachelors thesis and I need to have nice code. Thanks

[DennisSmolek]

Not sure about the Z-Indexing without seeing your code but my guess is they are on different z-planes.

To trigger you can call the sidenav explicitly (which I'm guessing you're doing) like this:

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav">
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
    <button md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</md-sidenav-container>

BUT You can also use that selector and the @ViewChild() decorator to access the element from your typescript code.
Before your constructor:
@ViewChild('sidenav') public myNav: MdSidenav;

then you can fire this.myNav.open() off all kinds of stuff, other buttons, services, etc.. LMK if that helps!

[theobalkwill]

@DennisSmolek Hi there, could you be a bit more precise on the usage on @ViewChild() ?
In my case, my and are in my 'app.component.html' template but I need to call sidenav.open() from my 'header.component.html' template which is called inside 'home.component.html' template (basically I used transclusion and ng-content to get the appropriate navbar content for each of my views). Hope that's clear enough.

So should I add a viewChild decorator to my app component and to my home component?

Thanks

[grizzm0]

I guess he's got the following structure.

• md-sidenav-container
  • custom-sidenav
    • md-sidenav
  • custom-header
    • md-toolbar

The "problem" here is that md-sidenav-container captures md-sidenav to ng-content. Hence his custom-sidenav ending up in md-sidenav-content messing up the backdrop. A possible "fix" would be to change to select="md-sidenav, [md-sidenav]". This way we could create sidenav components with the attribute md-sidenav that contains the actual sidenav.

[craig-o-curtis]

I'm got a similar problem, though not deeply nested

- md-sidenav-container ( main.component.ts / .html)
    - custom-header with nav toggle (header-menu.component.ts / .html)
    - custom sidenav component (sidenav.component.ts / .html)
        - md-sidenav

• md-sidenav inside the sidenav.component has sidenav.open() and sidenav.close(), but erroring out since 'custom sidenav doesn't have property sidenav or sidenav.open"

[DennisSmolek]

@theobalkwill

@DennisSmolek Hi there, could you be a bit more precise on the usage on @ViewChild() ?
In my case, my and are in my 'app.component.html' template but I need to call sidenav.open() from my 'header.component.html' template which is called inside 'home.component.html' template (basically I used transclusion and ng-content to get the appropriate navbar content for each of my views). Hope that's clear enough.

So should I add a viewChild decorator to my app component and to my home component?

Thanks

So a local variable allows you to attach to the component and issue commands to it but your sidenav is actually nested within ANOTHER component.
So you've got
Main Component
--sidenav
-- headerComponent---- buttonToToggleHeader

right?

What I would do is use @Output on headerComponent

So:

template: '<a (click)="navOpen()">Toggle Da Nav!</a>'

export class HeaderComponent {
  @Output() navToggle = new EventEmitter<boolean>();
  navOpen() {
    this.navToggle.emit(true);
  }
}

Then in mainComponent.html

<md-sidenav-container>
  <md-sidenav #mainNav>
    <!-- sidenav content -->
  </md-sidenav>

  <!-- primary content -->
</md-sidenav-container>
<headerComponent (navToggle)="mainNav.toggle()"></headerComponent>

Or if you want to have more drastic communication between components I prefer the service method

template: '<a (click)="toggleNav()">Toggle Da Nav!</a>'

export class HeaderComponent {
  constructor(public mySuperService:MySuperService) {
  
  }
  toggleNav() {
    this.mySuperService.sidenav.toggle();
  }
}

Then in mainComponent.html

<md-sidenav-container>
  <md-sidenav #mainNav>
    <!-- sidenav content -->
  </md-sidenav>

  <!-- primary content -->
</md-sidenav-container>
<headerComponent></headerComponent>

`mainComponent.ts`
@ViewChild('mainNav') public mainNav;
constructor(public mySuperService: MySuperService) {
    this.mySuperService.sidenav = this.mainNav;
}

`mySuperService`
@Injectable()
export class MySuperService {
    public sidenav: any;

}

There is some great reading here in the ngx on @ViewChild and here on component comms

[SirLants]

@DennisSmolek I'm a bit of a rookie here when it comes to constructors and ngOnInit(), I was getting an error until I added the "this.mySuperService.sidenav = this.mainNav" code into my ngOnInit instead of my constructor. Does ngOnInit() override predefined values that have been set in the constructor or something?

[DennisSmolek]

@DennisSmolek I'm a bit of a rookie here when it comes to constructors and ngOnInit(), I was getting an error until I added the "this.mySuperService.sidenav = this.mainNav" code into my ngOnInit instead of my constructor. Does ngOnInit() override predefined values that have been set in the constructor or something?

No, @Inject takes over a class constructor for most ng2 classes which means you can't really declare anything in the constructor. Plus ngOnInit()'s a lifecycle hook.
You could bind to any of the other events. It's standard practice now to use ngOnInit() where you would expect to do the actual "work" of a constructor.

The part that's confusing you I think is with visibility in the constructor.

When you define the visibility you remove the need to declare it before the constructor.
You could do this:

export class MyComponent {
    // vars
    private _MySuperService: MySuperService;

    constructor(mySuperService: MySuperService) {
        // without declaring in the constructor, mySuperService is only local, like this variable
        let localOnly = 'whatever';
        this._mySuperService = mySuperService;
    }

    otherFunction() {
        console.log(this._mySuperService.whatever);
     }
}

So thats a pain, Typescript lets you do this instead

export class MyComponent {

    constructor(private _mySuperService: MySuperService) {}

    otherFunction() {
        console.log(this._mySuperService.whatever);
     }
}

But if you do that, remember you've already declared it bound to this:

constructor(private _myService: MyService) {
    // THIS WILL FAIL AND THROW ERRORS
    let whatever = _myService.whatever;
    
    //This wont
    let whateverTwo = this._myService.whatever;
}

}

[tarlepp]

Hmm, and if I have following structure on my app.component.html

<md-sidenav-container fxFlex fxFlexFill>
  <md-sidenav #sidenav>
    Drawer content
  </md-sidenav>

  <div fxLayout="column" fxLayoutAlign="space-between stretch" fxFlexFill>
    <header>
      <router-outlet name="header" ></router-outlet>
    </header>

    <article fxFlex>
      <router-outlet></router-outlet>
    </article>

    <footer>
      <router-outlet name="footer"></router-outlet>
    </footer>
  </div>
</md-sidenav-container>

And I want to toggle that sidenav on any component that is rendered inside header router-outlet?

[flamusdiu]

@tarlepp A service would work. The catch is you need to assign the element in ngAfterViewInit(). I just spent about an hour trying to figure out why nothing worked.

[tarlepp]

@flamusdiu yeah got that working on my simple app almost like that with following setup:

app.component.html
app.component.ts
header.component.html
header.component.ts
sidenav.service.ts

I hope this helps others too

[lllbllllb]

@tarlepp thanks a lot!
It's really cool, flexible solution for any case

[mrusful]

Another one solution for discussion.

sidenav-layout is some abstraction above of MdSidenavModule that can be deleted.

Actually i implemented this functionality with Directive because I thought that it is possible to add more then one sidenav component on a page but it is not.

I wanted to pass sidenav's template reference into Directive with @Input property and decide which sidenav should be toggled. But since only one sidenav component can be added on a page this is not so valuable.

One thing what i don't like is that service is singleton for whole app. Maybe it is possible to add providers only within components.

[vovikdrg]

In my case i have structure

• selectorComponent
• • countrySelectComponent
• • • CountryFormComponent
• • • • Side nav
• • CitySelectComponent
• • • CityFormComponent
• • • • Side nav

And few more forms, idea is that as soon as i drom FormComponent to any place it has everything i need. Now it means that md-sidenav must me child of md-sidenav-container