title: Angular material2 sidenav not showing despite being in the dom
body: <p>I have an issue where the sidenav and header are different components sharing a service. This appears to be working when inspecting the sidenav element i can see the toggling to open and close. The problem i am having with this is no sidenav actually appears.</p>
  
  <p><a href="https://i.stack.imgur.com/AUmMz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AUmMz.png" alt="md-sidenav not appearing visually, although it is in the DOM"></a></p>
  
  <p><strong>component file</strong>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit, ViewChild } from '@angular/core';
  
  import { MdSidenav } from '@angular/material';
  
  import { SidenavToggleService } from './shared/sidenavToggle.service';
  
  @Component({
    selector: 'app-sidenav',
    templateUrl: './sidenav.component.html',
    styleUrls: ['./sidenav.component.css']
  })
  export class SidenavComponent implements OnInit {
    @ViewChild('sidenav') sidenav: MdSidenav;
  
    /**
     * Constructor of the class.
     * @param {sidenavService} SidenavToggleService
     */
    constructor(public sidenavService: SidenavToggleService) {}
  
    /**
     * OnInit life cycle hook
     */
    public ngOnInit(): void {
      this.sidenavService.setSidenav(this.sidenav);
    }
  
  }
  </code></pre>
  
  <p><strong>html file</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;md-sidenav-container&gt;
    &lt;md-sidenav #sidenav mode="over"&gt;
  testerer
    &lt;/md-sidenav&gt;
  &lt;/md-sidenav-container&gt;
  </code></pre>
  
  <p><strong>service file</strong>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { MdSidenav, MdSidenavToggleResult } from '@angular/material';
  
  @Injectable()
  export class SidenavToggleService {
    private sidenav: MdSidenav;
  
    /**
     * Setter for sidenav.
     *
     * @param {MdSidenav} sidenav
     */
    public setSidenav(sidenav: MdSidenav) {
      this.sidenav = sidenav;
    }
  
    /**
     * Open this sidenav, and return a Promise that will resolve when it's fully opened (or get rejected if it didn't).
     *
     * @returns Promise&lt;MdSidenavToggleResult&gt;
     */
    public open(): Promise&lt;MdSidenavToggleResult&gt; {
      return this.sidenav.open();
    }
  
    /**
     * Close this sidenav, and return a Promise that will resolve when it's fully closed (or get rejected if it didn't).
     *
     * @returns Promise&lt;MdSidenavToggleResult&gt;
     */
    public close(): Promise&lt;MdSidenavToggleResult&gt; {
      return this.sidenav.close();
    }
  
    /**
     * Toggle this sidenav. This is equivalent to calling open() when it's already opened, or close() when it's closed.
     *
     * @param {boolean} isOpen  Whether the sidenav should be open.
     *
     * @returns {Promise&lt;MdSidenavToggleResult&gt;}
     */
    public toggle(isOpen?: boolean): Promise&lt;MdSidenavToggleResult&gt; {
      console.log('uh');
      return this.sidenav.toggle(isOpen);
    }
  }
  </code></pre>
  
  <p>EDIT: Added the service I am using</p>