chore: remove change detection toggle from demo app (#6444)

Removes the toggle that changes the change detection in the demo app. It's not needed anymore since all components use OnPush.
This commit is contained in:
Kristiyan Kostadinov
2017-08-16 00:03:29 +02:00
committed by Andrew Seguin
parent 6422640b03
commit bfea2634d1
3 changed files with 4 additions and 45 deletions
+2 -11
View File
@@ -30,9 +30,6 @@
<div class="demo-toolbar">
<h1>Angular Material Demos</h1>
<div>
<button md-button (click)="toggleChangeDetection()" title="Toggle change detection">
Change detection: {{changeDetectionStrategy}}
</button>
<button md-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
<md-icon class="md-24">fullscreen</md-icon>
</button>
@@ -44,14 +41,8 @@
</div>
</md-toolbar>
<div #root="dir" 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 #root="dir" dir="ltr" class="demo-content">
<router-outlet></router-outlet>
</div>
</div>
</md-sidenav-container>
+1 -32
View File
@@ -2,13 +2,10 @@ import {
Component,
ViewEncapsulation,
ElementRef,
ChangeDetectionStrategy,
Renderer2,
} from '@angular/core';
import {OverlayContainer} from '@angular/material';
const changeDetectionKey = 'mdDemoChangeDetection';
/**
* The entry app for demo site. Routes under `accessibility` will use AccessibilityDemo component,
* while other demos will use `DemoApp` component. Since DemoApp and AccessibilityDemo use
@@ -35,15 +32,6 @@ export class EntryApp {}
})
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 {}
/**
* DemoApp with toolbar and sidenav.
*/
@@ -56,7 +44,6 @@ export class DemoAppOnPush {}
})
export class DemoApp {
dark = false;
changeDetectionStrategy: string;
navItems = [
{name: 'Autocomplete', route: '/autocomplete'},
{name: 'Button', route: '/button'},
@@ -97,14 +84,7 @@ export class DemoApp {
constructor(
private _element: ElementRef,
private _renderer: Renderer2,
private _overlayContainer: OverlayContainer) {
// Some browsers will throw when trying to access localStorage in incognito.
try {
this.changeDetectionStrategy = window.localStorage.getItem(changeDetectionKey) || 'Default';
} catch (error) {
console.error(error);
}
}
private _overlayContainer: OverlayContainer) {}
toggleFullscreen() {
let elem = this._element.nativeElement.querySelector('.demo-content');
@@ -119,17 +99,6 @@ export class DemoApp {
}
}
toggleChangeDetection() {
try {
this.changeDetectionStrategy = this.changeDetectionStrategy === 'Default' ?
'OnPush' : 'Default';
window.localStorage.setItem(changeDetectionKey, this.changeDetectionStrategy);
window.location.reload();
} catch (error) {
console.error(error);
}
}
toggleTheme() {
const darkThemeClass = 'unicorn-dark-theme';
+1 -2
View File
@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {DemoApp, DemoAppOnPush, Home} from './demo-app';
import {DemoApp, Home} from './demo-app';
import {DEMO_APP_ROUTES} from './routes';
import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
@@ -65,7 +65,6 @@ import {TableHeaderDemo} from '../table/table-header-demo';
CheckboxDemo,
DatepickerDemo,
DemoApp,
DemoAppOnPush,
DialogDemo,
GesturesDemo,
GridListDemo,