From 2cf19a3a85faa4665188b6c327b17981909f4be1 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 22 May 2017 20:28:14 +0200
Subject: [PATCH] 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
---
 src/demo-app/demo-app-module.ts      |  3 ++-
 src/demo-app/demo-app/demo-app.html  | 29 ++++++++++++++++--------
 src/demo-app/demo-app/demo-app.scss  |  1 +
 src/demo-app/demo-app/demo-app.ts    | 34 ++++++++++++++++++++++++----
 src/demo-app/tooltip/tooltip-demo.ts |  3 +--
 5 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts
index 13dc3ab25d9..13bf216435c 100644
--- a/src/demo-app/demo-app-module.ts
+++ b/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,
diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html
index 601a649f00d..6a6ed55300d 100644
--- a/src/demo-app/demo-app/demo-app.html
+++ b/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>
diff --git a/src/demo-app/demo-app/demo-app.scss b/src/demo-app/demo-app/demo-app.scss
index ee4512261ed..6e635dd8b53 100644
--- a/src/demo-app/demo-app/demo-app.scss
+++ b/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%;
     }
   }
diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts
index eab1dbf62fc..01d58af7483 100644
--- a/src/demo-app/demo-app/demo-app.ts
+++ b/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);
+    }
+  }
 }
diff --git a/src/demo-app/tooltip/tooltip-demo.ts b/src/demo-app/tooltip/tooltip-demo.ts
index d91bf118d70..a0c9d3213c3 100644
--- a/src/demo-app/tooltip/tooltip-demo.ts
+++ b/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';