Angular material2 sidenav not showing despite being in the dom

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. component file: ``` 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); } } ``` html file: ``` <md-sidenav-container> <md-sidenav #sidenav mode="over"> testerer </md-sidenav> </md-sidenav-container> ``` service file: ``` 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<MdSidenavToggleResult> */ public open(): Promise<MdSidenavToggleResult> { 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<MdSidenavToggleResult> */ public close(): Promise<MdSidenavToggleResult> { 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<MdSidenavToggleResult>} */ public toggle(isOpen?: boolean): Promise<MdSidenavToggleResult> { console.log('uh'); return this.sidenav.toggle(isOpen); } } ``` EDIT: Added the service I am using