From 698743fbc6cb4b360846ef503b0186d8b8118aba Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 19 Mar 2017 13:12:17 +0100
Subject: [PATCH 1/2] 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.
---
 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 c18519702c1e..af084d94620d 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 {
   MaterialModule,
   OverlayContainer,
@@ -65,6 +65,7 @@ import {StyleDemo} from './style/style-demo';
     ChipsDemo,
     CheckboxDemo,
     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 601a649f00d3..6a6ed55300d4 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 ee4512261ed3..6e635dd8b535 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 bdc3fe245c11..f5e02239f47f 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'},
@@ -57,7 +67,12 @@ export class DemoApp {
   ];
 
   constructor(private _element: ElementRef) {
-
+    // Some browsers will throw when trying to access localStorage in incognito.
+    try {
+      this.changeDetectionStrategy = localStorage.getItem(changeDetectionKey) || 'Default';
+    } catch (error) {
+      console.error(error);
+    }
   }
 
   toggleFullscreen() {
@@ -72,4 +87,15 @@ export class DemoApp {
       elem.msRequestFullScreen();
     }
   }
+
+  toggleChangeDetection() {
+    try {
+      this.changeDetectionStrategy = this.changeDetectionStrategy === 'Default' ?
+          'OnPush' : 'Default';
+      localStorage.setItem(changeDetectionKey, this.changeDetectionStrategy);
+      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 d91bf118d70d..a0c9d3213c32 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';

From c5a46e7d62215956b5b0cd2bc0009ba2b993a281 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 12 May 2017 10:47:41 +0200
Subject: [PATCH 2/2] chore: refer to global variables via the window

---
 src/demo-app/demo-app/demo-app.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts
index f5e02239f47f..b8f036c885cd 100644
--- a/src/demo-app/demo-app/demo-app.ts
+++ b/src/demo-app/demo-app/demo-app.ts
@@ -69,7 +69,7 @@ export class DemoApp {
   constructor(private _element: ElementRef) {
     // Some browsers will throw when trying to access localStorage in incognito.
     try {
-      this.changeDetectionStrategy = localStorage.getItem(changeDetectionKey) || 'Default';
+      this.changeDetectionStrategy = window.localStorage.getItem(changeDetectionKey) || 'Default';
     } catch (error) {
       console.error(error);
     }
@@ -92,8 +92,8 @@ export class DemoApp {
     try {
       this.changeDetectionStrategy = this.changeDetectionStrategy === 'Default' ?
           'OnPush' : 'Default';
-      localStorage.setItem(changeDetectionKey, this.changeDetectionStrategy);
-      location.reload();
+      window.localStorage.setItem(changeDetectionKey, this.changeDetectionStrategy);
+      window.location.reload();
     } catch (error) {
       console.error(error);
     }