chore(demos): Update demos to Angular MDC v0.38.2 (#1232)

Author: trimox

demos/app-layout/app-layout.html

@@ -1,7 +1,7 @@
 <mdc-app-bar class="demo-top-app-bar" #appbar fixed [fixedAdjustElement]="mainContent">
   <mdc-app-bar-row>
     <mdc-app-bar-section align="start" title="Angular MDC">
-      <mdc-icon mdcAppBarNavIcon (click)="appdrawer.open()" *ngIf="mobile">menu</mdc-icon>
+      <mdc-icon mdcAppBarNavIcon (click)="appdrawer.open()" *ngIf="isScreenSmall() || appbar.isCollapsed()">menu</mdc-icon>
     </mdc-app-bar-section>
     <mdc-app-bar-section align="end">
       <a mdcAppBarActionItem href="https://github.com/trimox/angular-mdc-web" alt="GitHub" target="_blank" rel="noopener noreferrer">
@@ -14,7 +14,7 @@
 </mdc-app-bar>
 
 <div #mainContent>
-  <mdc-drawer #appdrawer="mdcDrawer" [drawer]="mobile ? 'temporary' : 'permanent'" fixed class="demo-drawer--cursor-pointer">
+  <mdc-drawer #appdrawer="mdcDrawer" [drawer]="isScreenSmall() || appbar.isCollapsed() ? 'temporary' : 'permanent'" fixed class="demo-drawer">
     <mdc-drawer-content>
       <mdc-list-group>
         <mdc-list>
@@ -69,7 +69,7 @@
   <router-outlet></router-outlet>
 </div>
 
-<div class="demo-app-bar-control-container demo-layout__row-with-button" #demoAppBar>
+<div class="demo-app-bar-control-container demo-layout__row-with-button" #demoAppBarControls>
   <div class="demo-layout__row">
     <button mdc-button (click)="appbar.fixed = !appbar.fixed">Fixed: {{appbar.fixed ? 'On' : 'Off'}}</button>
     <button mdc-button (click)="appbar.prominent = !appbar.prominent">Promient: {{appbar.prominent ? 'On' : 'Off'}}</button>

demos/app-layout/app-layout.ts

@@ -1,20 +1,30 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Component, NgZone, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
+import { filter, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+const SMALL_WIDTH_BREAKPOINT = 1240;
 
 import { MdcAppBar } from '@angular-mdc/web';
 
 @Component({
   selector: 'app-layout',
   templateUrl: './app-layout.html'
 })
-export class AppLayout implements OnInit {
+export class AppLayout implements OnInit, OnDestroy {
+  /** Emits whenever the component is destroyed. */
+  private _destroy = new Subject<void>();
+
+  private _mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
+
+  @ViewChild('demoAppBarControls') demoAppBarControls;
+  @ViewChild(MdcAppBar) appBar: MdcAppBar;
+
   startVisible: boolean;
   buttonVisible: boolean;
   inputVisible: boolean;
   listVisible: boolean;
 
-  mobile: boolean;
-
   navigationLinks = [
     { name: 'App Bar', route: 'app-bar-demo', icon: 'remove' },
     { name: 'Card', route: 'card-demo', icon: 'credit_card' },
@@ -59,25 +69,32 @@ export class AppLayout implements OnInit {
     { name: 'Angular CLI', route: 'cli-guide' }
   ];
 
-  @ViewChild('appbar') appbar: MdcAppBar;
-  @ViewChild('demoAppBar') demoAppBar: ElementRef;
+  constructor(
+    private _router: Router,
+    private _ngZone: NgZone) {
+    this._mediaMatcher.addListener(mql => this._ngZone.run(() => this._mediaMatcher = mql));
+  }
 
-  constructor(private _router: Router) { }
+  isScreenSmall(): boolean {
+    return this._mediaMatcher.matches;
+  }
 
-  ngOnInit() {
-    this._router.events.subscribe(event => {
-      if (this._router.url.includes('/app-bar-demo')) {
-        if (event instanceof NavigationEnd) {
-          this.demoAppBar.nativeElement.style.display = 'block';
+  ngOnInit(): void {
+    this._router.events
+      .pipe(takeUntil(this._destroy),
+        filter(event => event instanceof NavigationEnd))
+      .subscribe(_ => {
+        if (this._router.url.includes('/app-bar-demo')) {
+          this.demoAppBarControls.nativeElement.style.display = 'block';
         } else {
-          this.demoAppBar.nativeElement.style.display = 'none';
-          this.appbar.fixed = true;
+          this.demoAppBarControls.nativeElement.style.display = 'none';
+          this.appBar.fixed = true; // reset to fixed after navigation off app-bar demo
         }
-      }
-    });
+      });
+  }
 
-    if (window.screen.width <= 1200) {
-      this.mobile = true;
-    }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
   }
 }