Angular Material cannot open a specific sidenav with ViewChild

Question

This works if I shove everything in the main.component... but that's not nice. Isn't Angular all about components?

I can call an open method, but I get a grey overlay with no sidebar content. It words without nested structure, but I want a nested structure.

BUG - This setup opens a grey (some people also spell this 'gray') overlay without the sidebar. Even W3 agrees:

Back to the matter at hand:

main.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { SidenavComponent } from './sidenav.component.ts';
@Component {
    selector: 'app-main-cmp',
    ....
}
export class MainComponent implements OnInit {
    @ViewChild(SidenavComponent) sidenavCmp: SidenavComponent;

    openSidenav(): void {
        this.sidenavCmp.leftSidenav.open(); // 
    }
}

main.component.html // do I need to pass anything in as attributes? child->parent is easy with EventEmitter, but this one is tricky...

<div>
    <app-sidenav></app-sidenav>
</div>

sidenav.component.ts

import { Component, OnInit } from '@angular/core';
import { MdSidenav } from '@angular/material';
@Component({
    selector: 'app-sidenav',
    ...
})
export class SidenavComponent implements OnInit {
    constructor( public leftSidenav: MdSidenav) { }
}

sidenav.component.html // the .close() method inside the component works..., but the component has no template

<md-sidenav #leftSidenav (swipeleft)="leftSidenav.close()">
   <h1>TEST</h1>
</md-sidenav>

I can open a sidenav, but it doesn't have my content.

So is there something about this naming a md-sidenav with a hash? Can I access that hash/sidenav instance from within the class somehow?