build: add toggle for OnPush change detection in demo app

Adds a toggle for enabling `OnPush` change detection in the demo app. This should make it easier to test out components with the different change detection strategies.

Author: crisbeto

src/demo-app/demo-app/demo-app.html

@@ -25,12 +25,17 @@
       </button>
       <div class="demo-toolbar">
         <h1>Angular Material Demos</h1>
-        <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
-          Fullscreen
-        </button>
-        <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
-          {{root.dir.toUpperCase()}}
-        </button>
+        <div>
+          <button md-button (click)="toggleChangeDetection()" title="Toggle change detection">
+            Change detection: {{isPushChangeDetection ? 'OnPush' : 'Default'}}
+          </button>
+          <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
+            Fullscreen
+          </button>
+          <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
+            {{root.dir.toUpperCase()}}
+          </button>
+        </div>
       </div>
     </md-toolbar>
 

src/demo-app/demo-app/demo-app.scss

@@ -32,6 +32,7 @@ body {
     .demo-toolbar {
       display: flex;
       justify-content: space-between;
+      align-items: center;
       width: 100%;
     }
   }

src/demo-app/demo-app/demo-app.ts

@@ -1,11 +1,20 @@
-import {Component, ViewEncapsulation, ElementRef} from '@angular/core';
+import {Component, ViewEncapsulation, ElementRef, ChangeDetectionStrategy} from '@angular/core';
 
+const changeDetectionKey = 'mdDemoChangeDetectionOnPush';
+let isPushChangeDetection = false;
+
+// Some browsers will throw when trying to access localStorage in incognito.
+try {
+  isPushChangeDetection = !!localStorage.getItem(changeDetectionKey);
+} catch (error) {
+  console.error(error);
+}
 
 @Component({
   selector: 'home',
   template: `
     <p>Welcome to the development demos for Angular Material!</p>
-    <p>Open the sidenav to select a demo. </p>
+    <p>Open the sidenav to select a demo.</p>
   `
 })
 export class Home {}
@@ -17,8 +26,12 @@ export class Home {}
   templateUrl: 'demo-app.html',
   styleUrls: ['demo-app.css'],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: isPushChangeDetection ?
+    ChangeDetectionStrategy.OnPush :
+    ChangeDetectionStrategy.Default
 })
 export class DemoApp {
+  isPushChangeDetection = isPushChangeDetection;
   navItems = [
     {name: 'Autocomplete', route: 'autocomplete'},
     {name: 'Button', route: 'button'},
@@ -53,9 +66,7 @@ export class DemoApp {
     {name: 'Style', route: 'style'}
   ];
 
-  constructor(private _element: ElementRef) {
-
-  }
+  constructor(private _element: ElementRef) { }
 
   toggleFullscreen() {
     let elem = this._element.nativeElement.querySelector('.demo-content');
@@ -69,4 +80,17 @@ export class DemoApp {
       elem.msRequestFullScreen();
     }
   }
+
+  toggleChangeDetection() {
+    try {
+      if (this.isPushChangeDetection) {
+        localStorage.removeItem(changeDetectionKey);
+      } else {
+        localStorage.setItem(changeDetectionKey, 'true');
+      }
+      location.reload();
+    } catch (error) {
+      console.error(error);
+    }
+  }
 }

src/demo-app/tooltip/tooltip-demo.ts

@@ -1,4 +1,4 @@
-import {Component, ChangeDetectionStrategy} from '@angular/core';
+import {Component} from '@angular/core';
 import {TooltipPosition} from '@angular/material';
 
 
@@ -7,7 +7,6 @@ import {TooltipPosition} from '@angular/material';
   selector: 'tooltip-demo',
   templateUrl: 'tooltip-demo.html',
   styleUrls: ['tooltip-demo.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush // make sure tooltip also works OnPush
 })
 export class TooltipDemo {
   position: TooltipPosition = 'below';