build: add toggle for OnPush change detection in demo app (#3675)

* 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.

* chore: refer to global variables via the window

Author: crisbeto

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

@@ -4,7 +4,7 @@ import {HttpModule} from '@angular/http';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {DemoApp, Home} from './demo-app/demo-app';
+import {DemoApp, Home, DemoAppOnPush} from './demo-app/demo-app';
 import {
   FullscreenOverlayContainer,
   MaterialModule,
@@ -69,6 +69,7 @@ import {DatepickerDemo} from './datepicker/datepicker-demo';
     CheckboxDemo,
     DatepickerDemo,
     DemoApp,
+    DemoAppOnPush,
     DialogDemo,
     GesturesDemo,
     GridListDemo,

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

@@ -25,18 +25,29 @@
       </button>
       <div class="demo-toolbar">
         <h1>Angular Material Demos</h1>
-        <button md-button (click)="dark = !dark">{{dark ? 'Light' : 'Dark'}} theme</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>
+          <button md-button (click)="dark = !dark">{{dark ? 'Light' : 'Dark'}} theme</button>
+          <button md-button (click)="toggleChangeDetection()" title="Toggle change detection">
+            Change detection: {{changeDetectionStrategy}}
+          </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>
 
-    <div #root="$implicit" dir="ltr" class="demo-content">
-      <router-outlet></router-outlet>
+    <div #root="$implicit" dir="ltr" class="demo-content" [ngSwitch]="changeDetectionStrategy">
+      <div *ngSwitchDefault>
+        <router-outlet></router-outlet>
+      </div>
+
+      <demo-app-on-push *ngSwitchCase="'OnPush'">
+        <router-outlet></router-outlet>
+      </demo-app-on-push>
     </div>
   </div>
 </md-sidenav-container>

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,15 +1,25 @@
-import {Component, ViewEncapsulation, ElementRef} from '@angular/core';
+import {Component, ViewEncapsulation, ElementRef, ChangeDetectionStrategy} from '@angular/core';
 
+const changeDetectionKey = 'mdDemoChangeDetection';
 
 @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 {}
 
+@Component({
+  moduleId: module.id,
+  selector: 'demo-app-on-push',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class DemoAppOnPush {}
+
 @Component({
   moduleId: module.id,
   selector: 'demo-app',
@@ -22,7 +32,7 @@ export class Home {}
 })
 export class DemoApp {
   dark = false;
-
+  changeDetectionStrategy: string;
   navItems = [
     {name: 'Autocomplete', route: 'autocomplete'},
     {name: 'Button', route: 'button'},
@@ -58,7 +68,12 @@ export class DemoApp {
   ];
 
   constructor(private _element: ElementRef) {
-
+    // Some browsers will throw when trying to access localStorage in incognito.
+    try {
+      this.changeDetectionStrategy = window.localStorage.getItem(changeDetectionKey) || 'Default';
+    } catch (error) {
+      console.error(error);
+    }
   }
 
   toggleFullscreen() {
@@ -73,4 +88,15 @@ export class DemoApp {
       elem.msRequestFullScreen();
     }
   }
+
+  toggleChangeDetection() {
+    try {
+      this.changeDetectionStrategy = this.changeDetectionStrategy === 'Default' ?
+          'OnPush' : 'Default';
+      window.localStorage.setItem(changeDetectionKey, this.changeDetectionStrategy);
+      window.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';