Angular Material sidenav with fullscreen

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular playground</title>
    <link rel="stylesheet" href="theme.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.12/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.12/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  <link href="https://rawgit.com/angular/material2-builds/master/prebuilt-themes/indigo-pink.css" rel="stylesheet">
  </head>

  <body class="dark-app-theme">
    <app-root>
    loading...
  </app-root>
  </body>

</html>

/* Styles go here */

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
a {
  cursor: pointer;
  cursor: hand;
}
button {
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}

/* Navigation link styles */
nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-right: 10px;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}
nav a:visited, a:link {
  color: #607D8B;
}
nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav a.active {
  color: #039be5;
}

/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

### Angular Starter Plunker - Typescript

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    
    '@angular/core': 'npm:@angular/core@4.2.6/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@4.2.6/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@4.2.6/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@4.2.6/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.2.6/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http@4.2.6/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router@4.2.6/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms@4.2.6/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations@4.2.6/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser@4.2.6/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations@4.2.6/bundles/animations-browser.umd.js',
    '@angular/material': 'npm:@angular/material@2.0.0-beta.8/bundles/material.umd.js',
    '@angular/cdk': 'npm:@angular/cdk@2.0.0-beta.8/bundles/cdk.umd.js',
    
    
    'rxjs': 'npm:rxjs@5.4.2',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdSidenavModule, MdButtonModule, MdToolbarModule, MdIconModule, MdListModule } from '@angular/material';
import { RouterModule } from '@angular/router';

import { FullscreenService } from './fullscreen.service';

import { AppComponent } from './app.component';
import { Comp1Component } from './comp1/comp1.component';
import { Comp2Component } from './comp2/comp2.component';
import { Fullscreen1Component } from './fullscreen1/fullscreen1.component';
import {NoConflictStyleCompatibilityMode} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    Comp1Component,
    Comp2Component,
    Fullscreen1Component
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MdSidenavModule,
    MdButtonModule,
    MdToolbarModule,
    MdIconModule,
    MdListModule,
    NoConflictStyleCompatibilityMode,
    RouterModule.forRoot([
      {
        path: 'comp1',
        component: Comp1Component
      },
      {
        path: 'comp2',
        component: Comp2Component
      },
      <any>{
        path: 'fullscreen1',
        component: Fullscreen1Component,
        fullscreen: true
      },
      {
        path: '',
        redirectTo: 'comp1',
        pathMatch: 'full'
      },
      {
        path: '**',
        component: Comp1Component
      }
    ]),

  ],
  providers: [
    FullscreenService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { FullscreenService } from './fullscreen.service';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  templateUrl: './src/app.component.html',
  styleUrls: ['./src/app.component.css']
})
export class AppComponent {
  title = 'app';
  fullscreen$: Observable<boolean>;

  constructor(private fullscreenService: FullscreenService) {

  }

  ngOnInit() {
    this.fullscreen$ = this.fullscreenService.fullscreen$;
  }
}

<mat-toolbar color="accent">
  <mat-toolbar-row>
    <span>Material App</span>
    <span class="example-spacer"></span>
    <mat-icon class="example-icon">favorite</mat-icon>
    <mat-icon class="example-icon">delete</mat-icon>
  </mat-toolbar-row>
</mat-toolbar>

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
      bred for hunting.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button color="warn">LIKE</button>
    <button mat-raised-button color="accent">SHARE</button>
  </mat-card-actions>
</mat-card>
<div class="not_a_component">Angular Theming</div>

@import '~@angular/material/theming';
@include mat-core();


$candy-app-primary: mat-palette($mat-blue, 600);
$candy-app-accent:  mat-palette($mat-blue-grey);
$candy-app-warn:    mat-palette($mat-deep-orange);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);



$dark-app-primary: mat-palette($mat-blue, 600);
$dark-app-accent:  mat-palette($mat-blue-grey);
$dark-app-warn:    mat-palette($mat-deep-orange);
$dark-app-theme: mat-dark-theme($dark-app-primary, $dark-app-accent, $dark-app-warn);
@include angular-material-theme($dark-app-theme);
.dark-app-theme {
  @include angular-material-theme($dark-app-theme);
}


.not_a_component {
	$background: map-get($candy-app-theme, background);
	background-color: grey;
    color: mat-color($background, background);
    padding: 15px;
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-comp1',
  templateUrl: './src/comp1/comp1.component.html',
})
export class Comp1Component implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

<h2 class="mat-h2">comp1 works!</h2>

<h2 class="mat-h2">comp2 works!</h2>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-comp2',
  templateUrl: './src/comp2/comp2.component.html'
})
export class Comp2Component implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
.example-header-image {
    background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
    background-size: cover;
}

.example-icon {
    padding: 0 14px;
}

.example-spacer {
    flex: 1 1 auto;
}

<div class="container">
  <div class="center">
    <h2 class="mat-h2">full screen 1</h2>
    <button md-raised-button type="button" [routerLink]="['/']">home</button>
  </div>
</div>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-fullscreen1',
  templateUrl: './src/fullscreen1/fullscreen1.component.html',
  styleUrls: ['./src/fullscreen1/fullscreen1.component.css']
})
export class Fullscreen1Component implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

.container {
    height: 100vh;
    background: lightblue;
    display: flex;    
    justify-content: center;
    align-items: center;
}

.center {
    text-align: center;
}

import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

@Injectable()
export class FullscreenService {
  fullscreen$: Observable<boolean>;

  constructor(private router: Router) {
    this.fullscreen$ = this.router.events
      .filter(event => {
        return event instanceof NavigationEnd;
      })
      .map((event: NavigationEnd) => {
        const route: any = this.router.config.find(r => {
          return '/' + r.path === event.url.split('?')[0];
        });

        return route && route.fullscreen ? true : false;
      });
  }

}