release: cut the zone.js-0.11.0 release (#38473)

PR Close #38473

.bazelrc

@@ -136,15 +136,6 @@ build:remote --remote_executor=remotebuildexecution.googleapis.com
 # retry mechanism and we do not want to retry unnecessarily if Karma already tried multiple times.
 test:saucelabs --flaky_test_attempts=1
 
-###############################
-# NodeJS rules settings
-# These settings are required for rules_nodejs
-###############################
-
-# Turn on managed directories feature in Bazel
-# This allows us to avoid installing a second copy of node_modules
-common --experimental_allow_incremental_repository_updates
-
 ####################################################
 # User bazel configuration
 # NOTE: This needs to be the *last* entry in the config.

.circleci/config.yml

@@ -32,8 +32,8 @@ var_4_win: &cache_key_win_fallback v7-angular-win-node-12-{{ checksum ".bazelver
 
 # Cache key for the `components-repo-unit-tests` job. **Note** when updating the SHA in the
 # cache keys also update the SHA for the "COMPONENTS_REPO_COMMIT" environment variable.
-var_5: &components_repo_unit_tests_cache_key v7-angular-components-f428c00465dfcf8a020237f22532480eedbd2cb6
-var_6: &components_repo_unit_tests_cache_key_fallback v7-angular-components-
+var_5: &components_repo_unit_tests_cache_key v9-angular-components-09e68db8ed5b1253f2fe38ff954ef0df019fc25a
+var_6: &components_repo_unit_tests_cache_key_fallback v9-angular-components-
 
 # Workspace initially persisted by the `setup` job, and then enhanced by `build-npm-packages` and
 # `build-ivy-npm-packages`.
@@ -656,6 +656,18 @@ jobs:
       - run: yarn tsc -p packages
       - run: yarn tsc -p modules
       - run: yarn bazel build //packages/zone.js:npm_package
+      # Build test fixtures for a test that rely on Bazel-generated fixtures. Note that disabling
+      # specific tests which are reliant on such generated fixtures is not an option as SystemJS
+      # in the Saucelabs legacy job always fetches referenced files, even if the imports would be
+      # guarded by an check to skip in the Saucelabs legacy job. We should be good running such
+      # test in all supported browsers on Saucelabs anyway until this job can be removed.
+      - run:
+          name: Preparing Bazel-generated fixtures required in legacy tests
+          command: |
+            yarn bazel build //packages/core/test:downleveled_es5_fixture
+            # Needed for the ES5 downlevel reflector test in `packages/core/test/reflection`.
+            cp dist/bin/packages/core/test/reflection/es5_downleveled_inheritance_fixture.js \
+              dist/all/@angular/core/test/reflection/es5_downleveled_inheritance_fixture.js
       - run:
           # Waiting on ready ensures that we don't run tests too early without Saucelabs not being ready.
           name: Waiting for Saucelabs tunnel to connect

.circleci/env.sh

@@ -74,7 +74,7 @@ setPublicVar COMPONENTS_REPO_TMP_DIR "/tmp/angular-components-repo"
 setPublicVar COMPONENTS_REPO_URL "https://github.com/angular/components.git"
 setPublicVar COMPONENTS_REPO_BRANCH "master"
 # **NOTE**: When updating the commit SHA, also update the cache key in the CircleCI `config.yml`.
-setPublicVar COMPONENTS_REPO_COMMIT "f428c00465dfcf8a020237f22532480eedbd2cb6"
+setPublicVar COMPONENTS_REPO_COMMIT "09e68db8ed5b1253f2fe38ff954ef0df019fc25a"
 
 
 ####################################################################################################

.ng-dev/commit-message.ts

@@ -7,18 +7,6 @@ export const commitMessage: CommitMessageConfig = {
   maxLineLength: 120,
   minBodyLength: 20,
   minBodyLengthTypeExcludes: ['docs'],
-  types: [
-    'build',
-    'ci',
-    'docs',
-    'feat',
-    'fix',
-    'perf',
-    'refactor',
-    'release',
-    'style',
-    'test',
-  ],
   scopes: [
     'animations',
     'bazel',

.pullapprove.yml

@@ -509,8 +509,8 @@ groups:
       - >
         contains_any_globs(files, [
           'packages/core/src/i18n/**',
-          'packages/core/src/render3/i18n.ts',
-          'packages/core/src/render3/i18n.md',
+          'packages/core/src/render3/i18n/**',
+          'packages/core/src/render3/instructions/i18n.ts',
           'packages/core/src/render3/interfaces/i18n.ts',
           'packages/common/locales/**',
           'packages/common/src/i18n/**',
@@ -882,6 +882,7 @@ groups:
       - *can-be-global-docs-approved
       - >
         contains_any_globs(files, [
+          'aio/content/guide/roadmap.md',
           'aio/content/marketing/**',
           'aio/content/images/bios/**',
           'aio/content/images/marketing/**',

CHANGELOG.md

@@ -1,3 +1,120 @@
+<a name="10.1.0-next.6"></a>
+# 10.1.0-next.6 (2020-08-17)
+
+
+### Bug Fixes
+
+* **core:** detect DI parameters in JIT mode for downleveled ES2015 classes ([#38463](https://github.com/angular/angular/issues/38463)) ([ca07da4](https://github.com/angular/angular/commit/ca07da4)), closes [#38453](https://github.com/angular/angular/issues/38453)
+* **core:** move generated i18n statements to the `consts` field of ComponentDef ([#38404](https://github.com/angular/angular/issues/38404)) ([cb05c01](https://github.com/angular/angular/commit/cb05c01))
+* **localize:** render ICU placeholders in extracted translation files ([#38484](https://github.com/angular/angular/issues/38484)) ([81c3e80](https://github.com/angular/angular/commit/81c3e80))
+* **ngcc:** detect synthesized delegate constructors for downleveled ES2015 classes ([#38463](https://github.com/angular/angular/issues/38463)) ([3b9c802](https://github.com/angular/angular/commit/3b9c802)), closes [#38453](https://github.com/angular/angular/issues/38453) [#38453](https://github.com/angular/angular/issues/38453)
+
+
+### Performance Improvements
+
+* **compiler-cli:** don't emit template guards when child scope is empty ([#38418](https://github.com/angular/angular/issues/38418)) ([1388c17](https://github.com/angular/angular/commit/1388c17))
+* **compiler-cli:** only generate directive declarations when used ([#38418](https://github.com/angular/angular/issues/38418)) ([fb8f4b4](https://github.com/angular/angular/commit/fb8f4b4))
+* **compiler-cli:** only generate type-check code for referenced DOM elements ([#38418](https://github.com/angular/angular/issues/38418)) ([f42e6ce](https://github.com/angular/angular/commit/f42e6ce))
+
+### Code Refactoring
+* **router:** export DefaultRouteReuseStrategy to Router public_api ([#31575](https://github.com/angular/angular/issues/31575)) ([ca79880](https://github.com/angular/angular/commit/ca79880))
+
+
+
+<a name="10.0.10"></a>
+## 10.0.10 (2020-08-17)
+
+
+### Bug Fixes
+
+* **common:** Allow scrolling when browser supports scrollTo ([#38468](https://github.com/angular/angular/issues/38468)) ([b32126c](https://github.com/angular/angular/commit/b32126c)), closes [#30630](https://github.com/angular/angular/issues/30630)
+* **core:** detect DI parameters in JIT mode for downleveled ES2015 classes ([#38500](https://github.com/angular/angular/issues/38500)) ([863acb6](https://github.com/angular/angular/commit/863acb6)), closes [#38453](https://github.com/angular/angular/issues/38453)
+* **core:** error if CSS custom property in host binding has number in name ([#38432](https://github.com/angular/angular/issues/38432)) ([cb83b8a](https://github.com/angular/angular/commit/cb83b8a)), closes [#37292](https://github.com/angular/angular/issues/37292)
+* **core:** fix multiple nested views removal from ViewContainerRef ([#38317](https://github.com/angular/angular/issues/38317)) ([d5e09f4](https://github.com/angular/angular/commit/d5e09f4)), closes [#38201](https://github.com/angular/angular/issues/38201)
+* **ngcc:** detect synthesized delegate constructors for downleveled ES2015 classes ([#38500](https://github.com/angular/angular/issues/38500)) ([f3dd6c2](https://github.com/angular/angular/commit/f3dd6c2)), closes [#38453](https://github.com/angular/angular/issues/38453) [#38453](https://github.com/angular/angular/issues/38453)
+* **router:** ensure routerLinkActive updates when associated routerLinks change ([#38349](https://github.com/angular/angular/issues/38349)) ([989e8a1](https://github.com/angular/angular/commit/989e8a1)), closes [#18469](https://github.com/angular/angular/issues/18469)
+
+
+
+<a name="10.1.0-next.5"></a>
+# 10.1.0-next.5 (2020-08-12)
+
+
+### Bug Fixes
+
+* **compiler-cli:** avoid creating value expressions for symbols from type-only imports ([#37912](https://github.com/angular/angular/issues/37912)) ([18098d3](https://github.com/angular/angular/commit/18098d3)), closes [#37900](https://github.com/angular/angular/issues/37900)
+* **compiler-cli:** type-check inputs that include undefined when there's coercion members ([#38273](https://github.com/angular/angular/issues/38273)) ([7525f3a](https://github.com/angular/angular/commit/7525f3a))
+* **router:** defer loading of wildcard module until needed ([#38348](https://github.com/angular/angular/issues/38348)) ([8f708b5](https://github.com/angular/angular/commit/8f708b5)), closes [#25494](https://github.com/angular/angular/issues/25494)
+* **router:** restore 'history.state' object for navigations coming from Angular router ([#28108](https://github.com/angular/angular/issues/28108)) ([#28176](https://github.com/angular/angular/issues/28176)) ([df76a20](https://github.com/angular/angular/commit/df76a20))
+
+
+### Features
+
+* **compiler-cli:** Add compiler option to report errors when assigning to restricted input fields ([#38249](https://github.com/angular/angular/issues/38249)) ([71138f6](https://github.com/angular/angular/commit/71138f6))
+* **router:** better warning message when a router outlet has not been instantiated ([#30246](https://github.com/angular/angular/issues/30246)) ([1609815](https://github.com/angular/angular/commit/1609815))
+
+
+
+<a name="10.0.9"></a>
+## 10.0.9 (2020-08-12)
+
+
+### Bug Fixes
+
+* **common:** ensure scrollRestoration is writable ([#30630](https://github.com/angular/angular/issues/30630)) ([#38357](https://github.com/angular/angular/issues/38357)) ([58f4b3a](https://github.com/angular/angular/commit/58f4b3a)), closes [#30629](https://github.com/angular/angular/issues/30629)
+* **compiler:** evaluate safe navigation expressions in correct binding order ([#37911](https://github.com/angular/angular/issues/37911)) ([f5b9d87](https://github.com/angular/angular/commit/f5b9d87)), closes [#37194](https://github.com/angular/angular/issues/37194)
+* **compiler-cli:** avoid creating value expressions for symbols from type-only imports ([#38415](https://github.com/angular/angular/issues/38415)) ([ca2b4bc](https://github.com/angular/angular/commit/ca2b4bc)), closes [#37912](https://github.com/angular/angular/issues/37912)
+* **compiler-cli:** infer quote expressions as any type in type checker ([#37917](https://github.com/angular/angular/issues/37917)) ([5b87c67](https://github.com/angular/angular/commit/5b87c67)), closes [#36568](https://github.com/angular/angular/issues/36568)
+* **compiler-cli:** mark eager `NgModuleFactory` construction as not side effectful ([#38320](https://github.com/angular/angular/issues/38320)) ([016a41b](https://github.com/angular/angular/commit/016a41b)), closes [#38147](https://github.com/angular/angular/issues/38147)
+* **compiler-cli:** match wrapHost parameter types within plugin interface ([#38004](https://github.com/angular/angular/issues/38004)) ([df01a82](https://github.com/angular/angular/commit/df01a82))
+* **compiler-cli:** preserve quotes in class member names ([#38387](https://github.com/angular/angular/issues/38387)) ([c9acb7b](https://github.com/angular/angular/commit/c9acb7b)), closes [#38311](https://github.com/angular/angular/issues/38311)
+* **core:** prevent NgModule scope being overwritten in JIT compiler ([#37795](https://github.com/angular/angular/issues/37795)) ([3acebdc](https://github.com/angular/angular/commit/3acebdc)), closes [#37105](https://github.com/angular/angular/issues/37105)
+* **core:** queries not matching string injection tokens ([#38321](https://github.com/angular/angular/issues/38321)) ([32109dc](https://github.com/angular/angular/commit/32109dc)), closes [#38313](https://github.com/angular/angular/issues/38313) [#38315](https://github.com/angular/angular/issues/38315)
+* **core:** Store the currently selected ICU in `LView` ([#38345](https://github.com/angular/angular/issues/38345)) ([ee5123f](https://github.com/angular/angular/commit/ee5123f))
+* **platform-server:** remove styles added by ServerStylesHost on destruction ([#38367](https://github.com/angular/angular/issues/38367)) ([7f11149](https://github.com/angular/angular/commit/7f11149))
+* **router:** prevent calling unsubscribe on undefined subscription in RouterPreloader ([#38344](https://github.com/angular/angular/issues/38344)) ([4151314](https://github.com/angular/angular/commit/4151314))
+* **service-worker:** fix the chrome debugger syntax highlighter ([#38332](https://github.com/angular/angular/issues/38332)) ([f5d5bac](https://github.com/angular/angular/commit/f5d5bac))
+
+
+
+<a name="10.1.0-next.4"></a>
+# 10.1.0-next.4 (2020-08-04)
+
+
+### Bug Fixes
+
+* **common:** narrow `NgIf` context variables in template type checker ([#36627](https://github.com/angular/angular/issues/36627)) ([9c8bc4a](https://github.com/angular/angular/commit/9c8bc4a))
+* **compiler:** mark `NgModuleFactory` construction as not side effectful ([#38147](https://github.com/angular/angular/issues/38147)) ([7f8c222](https://github.com/angular/angular/commit/7f8c222))
+
+
+### Features
+
+* **core:** rename async to waitForAsync to avoid confusing ([#37583](https://github.com/angular/angular/issues/37583)) ([8f07429](https://github.com/angular/angular/commit/8f07429))
+* **core:** update reference and doc to change `async` to `waitAsync`. ([#37583](https://github.com/angular/angular/issues/37583)) ([8fbf40b](https://github.com/angular/angular/commit/8fbf40b))
+
+
+
+<a name="10.0.8"></a>
+## 10.0.8 (2020-08-04)
+
+
+### Bug Fixes
+
+* **compiler:** add PURE annotation to getInheritedFactory calls ([#38291](https://github.com/angular/angular/issues/38291)) ([03d8e31](https://github.com/angular/angular/commit/03d8e31))
+* **compiler:** update unparsable character reference entity error messages ([#38319](https://github.com/angular/angular/issues/38319)) ([cea4678](https://github.com/angular/angular/commit/cea4678)), closes [#26067](https://github.com/angular/angular/issues/26067)
+
+
+
+<a name="10.0.7"></a>
+## 10.0.7 (2020-07-30)
+
+
+### Bug Fixes
+
+* **compiler:** Metadata should not include methods on Object.prototype ([#38292](https://github.com/angular/angular/issues/38292)) ([879ff08](https://github.com/angular/angular/commit/879ff08))
+
+
+
 <a name="10.1.0-next.3"></a>
 # 10.1.0-next.3 (2020-07-28)
 

aio/content/examples/accessibility/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,3 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by } from 'protractor';
 
 describe('Accessibility example e2e tests', () => {
@@ -8,11 +6,11 @@ describe('Accessibility example e2e tests', () => {
     browser.get('');
   });
 
-  it('should display Accessibility Example', function () {
+  it('should display Accessibility Example', () => {
     expect(element(by.css('h1')).getText()).toEqual('Accessibility Example');
   });
 
-  it('should take a number and change progressbar width', function () {
+  it('should take a number and change progressbar width', () => {
     element(by.css('input')).sendKeys('16');
     expect(element(by.css('input')).getAttribute('value')).toEqual('016');
     expect(element(by.css('app-example-progressbar div')).getCssValue('width')).toBe('48px');

aio/content/examples/accessibility/src/app/progress-bar.component.ts

@@ -1,3 +1,4 @@
+// tslint:disable: no-host-metadata-property
 // #docregion progressbar-component
 import { Component, Input } from '@angular/core';
 

aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts

@@ -1,20 +1,18 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by } from 'protractor';
 
-describe('AngularJS to Angular Quick Reference Tests', function () {
+describe('AngularJS to Angular Quick Reference Tests', () => {
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should display no poster images after bootstrap', function () {
+  it('should display no poster images after bootstrap', () => {
     testImagesAreDisplayed(false);
   });
 
-  it('should display proper movie data', function () {
+  it('should display proper movie data', () => {
     // We check only a few samples
-    let expectedSamples: any[] = [
+    const expectedSamples: any[] = [
       {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true},
       {row: 0, column: 2, value: 'Celeritas'},
       {row: 1, column: 3, matches: /Dec 1[678], 2015/}, // absorb timezone dif; we care about date format
@@ -25,18 +23,17 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
     ];
 
     // Go through the samples
-    let movieRows = getMovieRows();
-    for (let i = 0; i < expectedSamples.length; i++) {
-      let sample = expectedSamples[i];
-      let tableCell = movieRows.get(sample.row)
+    const movieRows = getMovieRows();
+    for (const sample of expectedSamples) {
+      const tableCell = movieRows.get(sample.row)
         .all(by.tagName('td')).get(sample.column);
       // Check the cell or its nested element
-      let elementToCheck = sample.element
+      const elementToCheck = sample.element
         ? tableCell.element(by.tagName(sample.element))
         : tableCell;
 
       // Check element attribute or text
-      let valueToCheck = sample.attr
+      const valueToCheck = sample.attr
         ? elementToCheck.getAttribute(sample.attr)
         : elementToCheck.getText();
 
@@ -51,42 +48,42 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
     }
   });
 
-  it('should display images after Show Poster', function () {
+  it('should display images after Show Poster', () => {
     testPosterButtonClick('Show Poster', true);
   });
 
-  it('should hide images after Hide Poster', function () {
+  it('should hide images after Hide Poster', () => {
     testPosterButtonClick('Hide Poster', false);
   });
 
-  it('should display no movie when no favorite hero is specified', function () {
+  it('should display no movie when no favorite hero is specified', () => {
     testFavoriteHero(null, 'Please enter your favorite hero.');
   });
 
-  it('should display no movie for Magneta', function () {
+  it('should display no movie for Magneta', () => {
     testFavoriteHero('Magneta', 'No movie, sorry!');
   });
 
-  it('should display a movie for Dr Nice', function () {
+  it('should display a movie for Dr Nice', () => {
     testFavoriteHero('Dr Nice', 'Excellent choice!');
   });
 
   function testImagesAreDisplayed(isDisplayed: boolean) {
-    let expectedMovieCount = 3;
+    const expectedMovieCount = 3;
 
-    let movieRows = getMovieRows();
+    const movieRows = getMovieRows();
     expect(movieRows.count()).toBe(expectedMovieCount);
     for (let i = 0; i < expectedMovieCount; i++) {
-      let movieImage = movieRows.get(i).element(by.css('td > img'));
+      const movieImage = movieRows.get(i).element(by.css('td > img'));
       expect(movieImage.isDisplayed()).toBe(isDisplayed);
     }
   }
 
   function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
-    let posterButton = element(by.css('app-movie-list tr > th > button'));
+    const posterButton = element(by.css('app-movie-list tr > th > button'));
     expect(posterButton.getText()).toBe(expectedButtonText);
 
-    posterButton.click().then(function () {
+    posterButton.click().then(() => {
       testImagesAreDisplayed(isDisplayed);
     });
   }
@@ -96,12 +93,12 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
   }
 
   function testFavoriteHero(heroName: string, expectedLabel: string) {
-    let movieListComp = element(by.tagName('app-movie-list'));
-    let heroInput = movieListComp.element(by.tagName('input'));
-    let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
-    let resultLabel = movieListComp.element(by.css('span > p'));
+    const movieListComp = element(by.tagName('app-movie-list'));
+    const heroInput = movieListComp.element(by.tagName('input'));
+    const favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
+    const resultLabel = movieListComp.element(by.css('span > p'));
 
-    heroInput.clear().then(function () {
+    heroInput.clear().then(() => {
       heroInput.sendKeys(heroName || '');
       expect(resultLabel.getText()).toBe(expectedLabel);
       if (heroName) {

aio/content/examples/animations/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,3 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, ExpectedConditions as EC } from 'protractor';
 import { logging } from 'selenium-webdriver';
 import * as openClose from './open-close.po';

aio/content/examples/animations/src/app/app.component.ts

@@ -34,7 +34,7 @@ export class AppComponent {
 
 // #docregion prepare-router-outlet
   prepareRoute(outlet: RouterOutlet) {
-    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
+    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
   }
 
 // #enddocregion prepare-router-outlet

aio/content/examples/animations/src/app/hero-list-page.component.ts

@@ -1,4 +1,6 @@
+// tslint:disable: variable-name
 // #docplaster
+// #docregion
 import { Component, HostBinding, OnInit } from '@angular/core';
 import { trigger, transition, animate, style, query, stagger } from '@angular/animations';
 import { HEROES } from './mock-heroes';
@@ -52,13 +54,11 @@ export class HeroListPageComponent implements OnInit {
   @HostBinding('@pageAnimations')
   public animatePage = true;
 
-  _heroes = [];
 // #docregion filter-animations
   heroTotal = -1;
 // #enddocregion filter-animations
-  get heroes() {
-    return this._heroes;
-  }
+  get heroes() { return this._heroes; }
+  private _heroes = [];
 
   ngOnInit() {
     this._heroes = HEROES;

aio/content/examples/animations/src/app/open-close.component.ts

@@ -8,8 +8,7 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
 // #docregion trigger, trigger-wildcard1, trigger-transition
   animations: [
     trigger('openClose', [
-// #enddocregion events1
-// #docregion state1, events1
+// #docregion state1
       // ...
 // #enddocregion events1
       state('open', style({
@@ -34,8 +33,7 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
       transition('closed => open', [
         animate('0.5s')
       ]),
-// #enddocregion trigger, component
-// #enddocregion transition2
+// #enddocregion transition2, trigger, component
 // #docregion trigger-wildcard1
       transition('* => closed', [
         animate('1s')
@@ -70,7 +68,9 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
 })
 // #docregion events
 export class OpenCloseComponent {
-// #enddocregion events1, events
+// #enddocregion events1, events, component
+  @Input() logging = false;
+// #docregion component
   isOpen = true;
 
   toggle() {
@@ -78,9 +78,8 @@ export class OpenCloseComponent {
   }
 
 // #enddocregion component
-  @Input() logging = false;
 // #docregion events1, events
-  onAnimationEvent ( event: AnimationEvent ) {
+  onAnimationEvent( event: AnimationEvent ) {
 // #enddocregion events1, events
     if (!this.logging) {
       return;

aio/content/examples/architecture/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,3 @@
-'use strict'; // necessary for es6 output in node
-
 import { protractor, browser, element, by, ElementFinder } from 'protractor';
 
 const nameSuffix = 'X';
@@ -21,7 +19,7 @@ describe('Architecture', () => {
   });
 
   it(`has h2 '${expectedH2}'`, () => {
-    let h2 = element.all(by.css('h2')).map((elt: any) => elt.getText());
+    const h2 = element.all(by.css('h2')).map((elt: any) => elt.getText());
     expect(h2).toEqual(expectedH2);
   });
 
@@ -34,42 +32,42 @@ function heroTests() {
   const targetHero: Hero = { id: 2, name: 'Dr Nice' };
 
   it('has the right number of heroes', () => {
-    let page = getPageElts();
+    const page = getPageElts();
     expect(page.heroes.count()).toEqual(3);
   });
 
-  it('has no hero details initially', function () {
-    let page = getPageElts();
+  it('has no hero details initially', () => {
+    const page = getPageElts();
     expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
   });
 
   it('shows selected hero details', async () => {
     await element(by.cssContainingText('li', targetHero.name)).click();
-    let page = getPageElts();
-    let hero = await heroFromDetail(page.heroDetail);
+    const page = getPageElts();
+    const hero = await heroFromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(targetHero.name);
   });
 
   it(`shows updated hero name in details`, async () => {
-    let input = element.all(by.css('input')).first();
+    const input = element.all(by.css('input')).first();
     input.sendKeys(nameSuffix);
-    let page = getPageElts();
-    let hero = await heroFromDetail(page.heroDetail);
-    let newName = targetHero.name + nameSuffix;
+    const page = getPageElts();
+    const hero = await heroFromDetail(page.heroDetail);
+    const newName = targetHero.name + nameSuffix;
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(newName);
   });
 }
 
 function salesTaxTests() {
-  it('has no sales tax initially', function () {
-    let page = getPageElts();
+  it('has no sales tax initially', () => {
+    const page = getPageElts();
     expect(page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info');
   });
 
-  it('shows sales tax', async function () {
-    let page = getPageElts();
+  it('shows sales tax', async () => {
+    const page = getPageElts();
     page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER);
     expect(page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00');
   });
@@ -88,13 +86,11 @@ function getPageElts() {
 
 async function heroFromDetail(detail: ElementFinder): Promise<Hero> {
   // Get hero id from the first <div>
-  // let _id = await detail.all(by.css('div')).first().getText();
-  let _id = await detail.all(by.css('div')).first().getText();
+  const id = await detail.all(by.css('div')).first().getText();
   // Get name from the h2
-  // let _name = await detail.element(by.css('h4')).getText();
-  let _name = await detail.element(by.css('h4')).getText();
+  const name = await detail.element(by.css('h4')).getText();
   return {
-    id: +_id.substr(_id.indexOf(' ') + 1),
-    name: _name.substr(0, _name.lastIndexOf(' '))
+    id: +id.substr(id.indexOf(' ') + 1),
+    name: name.substr(0, name.lastIndexOf(' ')),
   };
 }

aio/content/examples/architecture/src/app/backend.service.ts

@@ -18,7 +18,7 @@ export class BackendService {
       // TODO: get from the database
       return Promise.resolve<Hero[]>(HEROES);
     }
-    let err = new Error('Cannot get object of this type');
+    const err = new Error('Cannot get object of this type');
     this.logger.error(err);
     throw err;
   }

aio/content/examples/architecture/src/app/sales-tax.service.ts

@@ -7,7 +7,7 @@ export class SalesTaxService {
   constructor(private rateService: TaxRateService) { }
 
   getVAT(value: string | number) {
-    let amount = (typeof value === 'string') ?
+    const amount = (typeof value === 'string') ?
       parseFloat(value) : value;
     return (amount || 0) * this.rateService.getRate('VAT');
   }

aio/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts

@@ -1,34 +1,32 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by } from 'protractor';
 
-describe('Attribute binding example', function () {
+describe('Attribute binding example', () => {
 
-  beforeEach(function () {
+  beforeEach(() => {
     browser.get('');
   });
 
-  it('should display Property Binding with Angular', function () {
+  it('should display Property Binding with Angular', () => {
     expect(element(by.css('h1')).getText()).toEqual('Attribute, class, and style bindings');
   });
 
-  it('should display a table', function() {
+  it('should display a table', () => {
     expect(element.all(by.css('table')).isPresent()).toBe(true);
   });
 
-  it('should display an Aria button', function () {
+  it('should display an Aria button', () => {
     expect(element.all(by.css('button')).get(0).getText()).toBe('Go for it with Aria');
   });
 
-  it('should display a blue background on div', function () {
+  it('should display a blue background on div', () => {
     expect(element.all(by.css('div')).get(1).getCssValue('background-color')).toEqual('rgba(25, 118, 210, 1)');
   });
 
-  it('should display a blue div with a red border', function () {
+  it('should display a blue div with a red border', () => {
     expect(element.all(by.css('div')).get(1).getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)');
   });
 
-  it('should display a div with many classes', function () {
+  it('should display a div with many classes', () => {
     expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('special');
     expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('clearance');
   });

aio/content/examples/attribute-binding/src/app/comp-with-host-binding.component.ts

@@ -1,16 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'comp-with-host-binding',
   template: 'I am a component!',
-  host: {
-    '[class.special]': 'isSpecial',
-    '[style.color]': 'color',
-    '[style.width]': 'width'
-  }
 })
 export class CompWithHostBindingComponent {
+  @HostBinding('class.special')
   isSpecial = false;
+
+  @HostBinding('style.color')
   color = 'green';
+
+  @HostBinding('style.width')
   width = '200px';
 }

aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts

@@ -1,17 +1,15 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by } from 'protractor';
 
 describe('Attribute directives', () => {
 
-  let _title = 'My First Attribute Directive';
+  const title = 'My First Attribute Directive';
 
   beforeAll(() => {
     browser.get('');
   });
 
-  it(`should display correct title: ${_title}`, () => {
-    expect(element(by.css('h1')).getText()).toEqual(_title);
+  it(`should display correct title: ${title}`, () => {
+    expect(element(by.css('h1')).getText()).toEqual(title);
   });
 
   it('should be able to select green highlight', () => {

aio/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts

@@ -3,57 +3,55 @@ import { logging } from 'selenium-webdriver';
 
 describe('Binding syntax e2e tests', () => {
 
-  beforeEach(function () {
-    browser.get('');
-  });
+  beforeEach(() => browser.get(''));
 
 
   // helper function used to test what's logged to the console
   async function logChecker(button, contents) {
     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-      const message = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
-      expect(message.length).toBeGreaterThan(0);
+    const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
+    expect(messages.length).toBeGreaterThan(0);
   }
 
 
-  it('should display Binding syntax', function () {
+  it('should display Binding syntax', () => {
     expect(element(by.css('h1')).getText()).toEqual('Binding syntax');
   });
 
-  it('should display Save button', function () {
+  it('should display Save button', () => {
     expect(element.all(by.css('button')).get(0).getText()).toBe('Save');
   });
 
-  it('should display HTML attributes and DOM properties', function () {
+  it('should display HTML attributes and DOM properties', () => {
     expect(element.all(by.css('h2')).get(1).getText()).toBe('HTML attributes and DOM properties');
   });
 
-  it('should display 1. Use the inspector...', function () {
+  it('should display 1. Use the inspector...', () => {
     expect(element.all(by.css('p')).get(0).getText()).toContain('1. Use the inspector');
   });
 
-  it('should display Disabled property vs. attribute', function () {
+  it('should display Disabled property vs. attribute', () => {
     expect(element.all(by.css('h3')).get(0).getText()).toBe('Disabled property vs. attribute');
   });
 
 
   it('should log a message including Sarah', async () => {
-    let attributeButton = element.all(by.css('button')).get(1);
+    const attributeButton = element.all(by.css('button')).get(1);
     await attributeButton.click();
     const contents = 'Sarah';
     logChecker(attributeButton, contents);
   });
 
   it('should log a message including Sarah for DOM property', async () => {
-    let DOMPropertyButton = element.all(by.css('button')).get(2);
+    const DOMPropertyButton = element.all(by.css('button')).get(2);
     await DOMPropertyButton.click();
     const contents = 'Sarah';
     logChecker(DOMPropertyButton, contents);
   });
 
   it('should log a message including Sally for DOM property', async () => {
-    let DOMPropertyButton = element.all(by.css('button')).get(2);
-    let input = element(by.css('input'));
+    const DOMPropertyButton = element.all(by.css('button')).get(2);
+    const input = element(by.css('input'));
     input.sendKeys('Sally');
     await DOMPropertyButton.click();
     const contents = 'Sally';
@@ -61,14 +59,14 @@ describe('Binding syntax e2e tests', () => {
   });
 
   it('should log a message that Test Button works', async () => {
-    let testButton = element.all(by.css('button')).get(3);
+    const testButton = element.all(by.css('button')).get(3);
     await testButton.click();
     const contents = 'Test';
     logChecker(testButton, contents);
   });
 
   it('should toggle Test Button disabled', async () => {
-    let toggleButton = element.all(by.css('button')).get(4);
+    const toggleButton = element.all(by.css('button')).get(4);
     await toggleButton.click();
     const contents = 'true';
     logChecker(toggleButton, contents);

aio/content/examples/binding-syntax/src/app/app.component.ts

@@ -26,7 +26,7 @@ export class AppComponent {
 
   toggleDisabled(): any {
 
-    let testButton = <HTMLInputElement> document.getElementById('testButton');
+    const testButton = document.getElementById('testButton') as HTMLInputElement;
     testButton.disabled = !testButton.disabled;
     console.warn(testButton.disabled);
   }

aio/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts

@@ -1,21 +1,19 @@
-'use strict';
-
 import { browser, element, by } from 'protractor';
 
-describe('Built-in Directives', function () {
+describe('Built-in Directives', () => {
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should have title Built-in Directives', function () {
-    let title = element.all(by.css('h1')).get(0);
+  it('should have title Built-in Directives', () => {
+    const title = element.all(by.css('h1')).get(0);
     expect(title.getText()).toEqual('Built-in Directives');
   });
 
   it('should change first Teapot header', async () => {
-    let firstLabel = element.all(by.css('p')).get(0);
-    let firstInput = element.all(by.css('input')).get(0);
+    const firstLabel = element.all(by.css('p')).get(0);
+    const firstInput = element.all(by.css('input')).get(0);
 
     expect(firstLabel.getText()).toEqual('Current item name: Teapot');
     firstInput.sendKeys('abc');
@@ -23,49 +21,49 @@ describe('Built-in Directives', function () {
   });
 
 
-  it('should modify sentence when modified checkbox checked', function () {
-    let modifiedChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(1);
-    let modifiedSentence = element.all(by.css('div')).get(1);
+  it('should modify sentence when modified checkbox checked', () => {
+    const modifiedChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(1);
+    const modifiedSentence = element.all(by.css('div')).get(1);
 
     modifiedChkbxLabel.click();
     expect(modifiedSentence.getText()).toContain('modified');
   });
 
-  it('should modify sentence when normal checkbox checked', function () {
-    let normalChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(4);
-    let normalSentence = element.all(by.css('div')).get(7);
+  it('should modify sentence when normal checkbox checked', () => {
+    const normalChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(4);
+    const normalSentence = element.all(by.css('div')).get(7);
 
     normalChkbxLabel.click();
     expect(normalSentence.getText()).toContain('normal weight and, extra large');
   });
 
-  it('should toggle app-item-detail', function () {
-    let toggleButton = element.all(by.css('button')).get(3);
-    let toggledDiv = element.all(by.css('app-item-detail')).get(0);
+  it('should toggle app-item-detail', () => {
+    const toggleButton = element.all(by.css('button')).get(3);
+    const toggledDiv = element.all(by.css('app-item-detail')).get(0);
 
     toggleButton.click();
     expect(toggledDiv.isDisplayed()).toBe(true);
   });
 
-  it('should hide app-item-detail', function () {
-    let hiddenMessage = element.all(by.css('p')).get(11);
-    let hiddenDiv = element.all(by.css('app-item-detail')).get(2);
+  it('should hide app-item-detail', () => {
+    const hiddenMessage = element.all(by.css('p')).get(11);
+    const hiddenDiv = element.all(by.css('app-item-detail')).get(2);
 
     expect(hiddenMessage.getText()).toContain('in the DOM');
     expect(hiddenDiv.isDisplayed()).toBe(true);
   });
 
-  it('should have 10 lists each containing the string Teapot', function () {
-    let listDiv = element.all(by.cssContainingText('.box', 'Teapot'));
+  it('should have 10 lists each containing the string Teapot', () => {
+    const listDiv = element.all(by.cssContainingText('.box', 'Teapot'));
     expect(listDiv.count()).toBe(10);
   });
 
-  it('should switch case', function () {
-    let tvRadioButton = element.all(by.css('input[type="radio"]')).get(3);
-    let tvDiv = element(by.css('app-lost-item'));
+  it('should switch case', () => {
+    const tvRadioButton = element.all(by.css('input[type="radio"]')).get(3);
+    const tvDiv = element(by.css('app-lost-item'));
 
-    let fishbowlRadioButton = element.all(by.css('input[type="radio"]')).get(4);
-    let fishbowlDiv = element(by.css('app-unknown-item'));
+    const fishbowlRadioButton = element.all(by.css('input[type="radio"]')).get(4);
+    const fishbowlDiv = element(by.css('app-unknown-item'));
 
     tvRadioButton.click();
     expect(tvDiv.getText()).toContain('Television');

aio/content/examples/built-in-directives/src/app/app.component.ts

@@ -30,6 +30,14 @@ export class AppComponent implements OnInit {
   itemsWithTrackByCountReset = 0;
   itemIdIncrement = 1;
 
+  // #docregion setClasses
+  currentClasses: {};
+  // #enddocregion setClasses
+
+  // #docregion setStyles
+  currentStyles: {};
+  // #enddocregion setStyles
+
   ngOnInit() {
     this.resetItems();
     this.setCurrentClasses();
@@ -41,20 +49,18 @@ export class AppComponent implements OnInit {
     this.currentItem.name = name.toUpperCase();
   }
 
-// #docregion setClasses
-  currentClasses: {};
+  // #docregion setClasses
   setCurrentClasses() {
     // CSS classes: added/removed per current state of component properties
     this.currentClasses =  {
-      'saveable': this.canSave,
-      'modified': !this.isUnchanged,
-      'special':  this.isSpecial
+      saveable: this.canSave,
+      modified: !this.isUnchanged,
+      special:  this.isSpecial
     };
   }
   // #enddocregion setClasses
 
   // #docregion setStyles
-  currentStyles: {};
   setCurrentStyles() {
     // CSS styles: set per current state of component properties
     this.currentStyles = {
@@ -70,11 +76,7 @@ export class AppComponent implements OnInit {
   }
 
   giveNullCustomerValue() {
-    !(this.nullCustomer = null) ? (this.nullCustomer = 'Kelly') : (this.nullCustomer = null);
-  }
-
-  resetNullItem() {
-    this.nullCustomer = null;
+    this.nullCustomer = 'Kelly';
   }
 
   resetItems() {
@@ -84,7 +86,7 @@ export class AppComponent implements OnInit {
   }
 
   resetList() {
-    this.resetItems()
+    this.resetItems();
     this.itemsWithTrackByCountReset = 0;
     this.itemsNoTrackByCount = ++this.itemsNoTrackByCount;
   }
@@ -107,7 +109,7 @@ export class AppComponent implements OnInit {
   trackByItems(index: number, item: Item): number { return item.id; }
 // #enddocregion trackByItems
 
-  trackById(index: number, item: any): number { return item['id']; }
+  trackById(index: number, item: any): number { return item.id; }
 
 }
 

aio/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts

@@ -1,19 +1,17 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by } from 'protractor';
 
-describe('Built Template Functions Example', function () {
-  beforeAll(function () {
+describe('Built Template Functions Example', () => {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should have title Built-in Template Functions', function () {
-    let title = element.all(by.css('h1')).get(0);
+  it('should have title Built-in Template Functions', () => {
+    const title = element.all(by.css('h1')).get(0);
     expect(title.getText()).toEqual('Built-in Template Functions');
   });
 
-  it('should display $any( ) in h2', function () {
-    let header = element(by.css('h2'));
+  it('should display $any( ) in h2', () => {
+    const header = element(by.css('h2'));
     expect(header.getText()).toContain('$any( )');
   });
 

aio/content/examples/component-interaction/e2e/src/app.e2e-spec.ts

@@ -1,87 +1,85 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by } from 'protractor';
 
-describe('Component Communication Cookbook Tests', function () {
+describe('Component Communication Cookbook Tests', () => {
 
   // Note: '?e2e' which app can read to know it is running in protractor
   // e.g. `if (!/e2e/.test(location.search)) { ...`
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('?e2e');
   });
 
-  describe('Parent-to-child communication', function() {
+  describe('Parent-to-child communication', () => {
     // #docregion parent-to-child
     // ...
-    let _heroNames = ['Dr IQ', 'Magneta', 'Bombasto'];
-    let _masterName = 'Master';
+    const heroNames = ['Dr IQ', 'Magneta', 'Bombasto'];
+    const masterName = 'Master';
 
-    it('should pass properties to children properly', function () {
-      let parent = element.all(by.tagName('app-hero-parent')).get(0);
-      let heroes = parent.all(by.tagName('app-hero-child'));
+    it('should pass properties to children properly', () => {
+      const parent = element.all(by.tagName('app-hero-parent')).get(0);
+      const heroes = parent.all(by.tagName('app-hero-child'));
 
-      for (let i = 0; i < _heroNames.length; i++) {
-        let childTitle = heroes.get(i).element(by.tagName('h3')).getText();
-        let childDetail = heroes.get(i).element(by.tagName('p')).getText();
-        expect(childTitle).toEqual(_heroNames[i] + ' says:');
-        expect(childDetail).toContain(_masterName);
+      for (let i = 0; i < heroNames.length; i++) {
+        const childTitle = heroes.get(i).element(by.tagName('h3')).getText();
+        const childDetail = heroes.get(i).element(by.tagName('p')).getText();
+        expect(childTitle).toEqual(heroNames[i] + ' says:');
+        expect(childDetail).toContain(masterName);
       }
     });
     // ...
     // #enddocregion parent-to-child
   });
 
-  describe('Parent-to-child communication with setter', function() {
+  describe('Parent-to-child communication with setter', () => {
     // #docregion parent-to-child-setter
     // ...
-    it('should display trimmed, non-empty names', function () {
-      let _nonEmptyNameIndex = 0;
-      let _nonEmptyName = '"Dr IQ"';
-      let parent = element.all(by.tagName('app-name-parent')).get(0);
-      let hero = parent.all(by.tagName('app-name-child')).get(_nonEmptyNameIndex);
+    it('should display trimmed, non-empty names', () => {
+      const nonEmptyNameIndex = 0;
+      const nonEmptyName = '"Dr IQ"';
+      const parent = element.all(by.tagName('app-name-parent')).get(0);
+      const hero = parent.all(by.tagName('app-name-child')).get(nonEmptyNameIndex);
 
-      let displayName = hero.element(by.tagName('h3')).getText();
-      expect(displayName).toEqual(_nonEmptyName);
+      const displayName = hero.element(by.tagName('h3')).getText();
+      expect(displayName).toEqual(nonEmptyName);
     });
 
-    it('should replace empty name with default name', function () {
-      let _emptyNameIndex = 1;
-      let _defaultName = '"<no name set>"';
-      let parent = element.all(by.tagName('app-name-parent')).get(0);
-      let hero = parent.all(by.tagName('app-name-child')).get(_emptyNameIndex);
+    it('should replace empty name with default name', () => {
+      const emptyNameIndex = 1;
+      const defaultName = '"<no name set>"';
+      const parent = element.all(by.tagName('app-name-parent')).get(0);
+      const hero = parent.all(by.tagName('app-name-child')).get(emptyNameIndex);
 
-      let displayName = hero.element(by.tagName('h3')).getText();
-      expect(displayName).toEqual(_defaultName);
+      const displayName = hero.element(by.tagName('h3')).getText();
+      expect(displayName).toEqual(defaultName);
     });
     // ...
     // #enddocregion parent-to-child-setter
   });
 
-  describe('Parent-to-child communication with ngOnChanges', function() {
+  describe('Parent-to-child communication with ngOnChanges', () => {
     // #docregion parent-to-child-onchanges
     // ...
     // Test must all execute in this exact order
-    it('should set expected initial values', function () {
-      let actual = getActual();
+    it('should set expected initial values', () => {
+      const actual = getActual();
 
-      let initialLabel = 'Version 1.23';
-      let initialLog = 'Initial value of major set to 1, Initial value of minor set to 23';
+      const initialLabel = 'Version 1.23';
+      const initialLog = 'Initial value of major set to 1, Initial value of minor set to 23';
 
       expect(actual.label).toBe(initialLabel);
       expect(actual.count).toBe(1);
       expect(actual.logs.get(0).getText()).toBe(initialLog);
     });
 
-    it('should set expected values after clicking \'Minor\' twice', function () {
-      let repoTag = element(by.tagName('app-version-parent'));
-      let newMinorButton = repoTag.all(by.tagName('button')).get(0);
+    it('should set expected values after clicking \'Minor\' twice', () => {
+      const repoTag = element(by.tagName('app-version-parent'));
+      const newMinorButton = repoTag.all(by.tagName('button')).get(0);
 
-      newMinorButton.click().then(function() {
-        newMinorButton.click().then(function() {
-          let actual = getActual();
+      newMinorButton.click().then(() => {
+        newMinorButton.click().then(() => {
+          const actual = getActual();
 
-          let labelAfter2Minor = 'Version 1.25';
-          let logAfter2Minor = 'minor changed from 24 to 25';
+          const labelAfter2Minor = 'Version 1.25';
+          const logAfter2Minor = 'minor changed from 24 to 25';
 
           expect(actual.label).toBe(labelAfter2Minor);
           expect(actual.count).toBe(3);
@@ -90,15 +88,15 @@ describe('Component Communication Cookbook Tests', function () {
       });
     });
 
-    it('should set expected values after clicking \'Major\' once', function () {
-      let repoTag = element(by.tagName('app-version-parent'));
-      let newMajorButton = repoTag.all(by.tagName('button')).get(1);
+    it('should set expected values after clicking \'Major\' once', () => {
+      const repoTag = element(by.tagName('app-version-parent'));
+      const newMajorButton = repoTag.all(by.tagName('button')).get(1);
 
-      newMajorButton.click().then(function() {
-        let actual = getActual();
+      newMajorButton.click().then(() => {
+        const actual = getActual();
 
-        let labelAfterMajor = 'Version 2.0';
-        let logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 0';
+        const labelAfterMajor = 'Version 2.0';
+        const logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 0';
 
         expect(actual.label).toBe(labelAfterMajor);
         expect(actual.count).toBe(4);
@@ -107,14 +105,14 @@ describe('Component Communication Cookbook Tests', function () {
     });
 
     function getActual() {
-      let versionTag = element(by.tagName('app-version-child'));
-      let label = versionTag.element(by.tagName('h3')).getText();
-      let ul = versionTag.element((by.tagName('ul')));
-      let logs = ul.all(by.tagName('li'));
+      const versionTag = element(by.tagName('app-version-child'));
+      const label = versionTag.element(by.tagName('h3')).getText();
+      const ul = versionTag.element((by.tagName('ul')));
+      const logs = ul.all(by.tagName('li'));
 
       return {
-        label: label,
-        logs: logs,
+        label,
+        logs,
         count: logs.count()
       };
     }
@@ -123,30 +121,30 @@ describe('Component Communication Cookbook Tests', function () {
 
   });
 
-  describe('Child-to-parent communication', function() {
+  describe('Child-to-parent communication', () => {
     // #docregion child-to-parent
     // ...
-    it('should not emit the event initially', function () {
-      let voteLabel = element(by.tagName('app-vote-taker'))
+    it('should not emit the event initially', () => {
+      const voteLabel = element(by.tagName('app-vote-taker'))
         .element(by.tagName('h3')).getText();
       expect(voteLabel).toBe('Agree: 0, Disagree: 0');
     });
 
-    it('should process Agree vote', function () {
-      let agreeButton1 = element.all(by.tagName('app-voter')).get(0)
+    it('should process Agree vote', () => {
+      const agreeButton1 = element.all(by.tagName('app-voter')).get(0)
         .all(by.tagName('button')).get(0);
-      agreeButton1.click().then(function() {
-        let voteLabel = element(by.tagName('app-vote-taker'))
+      agreeButton1.click().then(() => {
+        const voteLabel = element(by.tagName('app-vote-taker'))
           .element(by.tagName('h3')).getText();
         expect(voteLabel).toBe('Agree: 1, Disagree: 0');
       });
     });
 
-    it('should process Disagree vote', function () {
-      let agreeButton1 = element.all(by.tagName('app-voter')).get(1)
+    it('should process Disagree vote', () => {
+      const agreeButton1 = element.all(by.tagName('app-voter')).get(1)
         .all(by.tagName('button')).get(1);
-      agreeButton1.click().then(function() {
-        let voteLabel = element(by.tagName('app-vote-taker'))
+      agreeButton1.click().then(() => {
+        const voteLabel = element(by.tagName('app-vote-taker'))
           .element(by.tagName('h3')).getText();
         expect(voteLabel).toBe('Agree: 1, Disagree: 1');
       });
@@ -157,31 +155,31 @@ describe('Component Communication Cookbook Tests', function () {
 
   // Can't run timer tests in protractor because
   // interaction w/ zones causes all tests to freeze & timeout.
-  xdescribe('Parent calls child via local var', function() {
+  xdescribe('Parent calls child via local var', () => {
     countDownTimerTests('countdown-parent-lv');
   });
 
-  xdescribe('Parent calls ViewChild', function() {
+  xdescribe('Parent calls ViewChild', () => {
     countDownTimerTests('countdown-parent-vc');
   });
 
   function countDownTimerTests(parentTag: string) {
     // #docregion countdown-timer-tests
     // ...
-    it('timer and parent seconds should match', function () {
-      let parent = element(by.tagName(parentTag));
-      let message = parent.element(by.tagName('app-countdown-timer')).getText();
+    it('timer and parent seconds should match', () => {
+      const parent = element(by.tagName(parentTag));
+      const message = parent.element(by.tagName('app-countdown-timer')).getText();
       browser.sleep(10); // give `seconds` a chance to catchup with `message`
-      let seconds = parent.element(by.className('seconds')).getText();
+      const seconds = parent.element(by.className('seconds')).getText();
       expect(message).toContain(seconds);
     });
 
-    it('should stop the countdown', function () {
-      let parent = element(by.tagName(parentTag));
-      let stopButton = parent.all(by.tagName('button')).get(1);
+    it('should stop the countdown', () => {
+      const parent = element(by.tagName(parentTag));
+      const stopButton = parent.all(by.tagName('button')).get(1);
 
-      stopButton.click().then(function() {
-        let message = parent.element(by.tagName('app-countdown-timer')).getText();
+      stopButton.click().then(() => {
+        const message = parent.element(by.tagName('app-countdown-timer')).getText();
         expect(message).toContain('Holding');
       });
     });
@@ -190,39 +188,39 @@ describe('Component Communication Cookbook Tests', function () {
   }
 
 
-  describe('Parent and children communicate via a service', function() {
+  describe('Parent and children communicate via a service', () => {
     // #docregion bidirectional-service
     // ...
-    it('should announce a mission', function () {
-      let missionControl = element(by.tagName('app-mission-control'));
-      let announceButton = missionControl.all(by.tagName('button')).get(0);
-      announceButton.click().then(function () {
-        let history = missionControl.all(by.tagName('li'));
+    it('should announce a mission', () => {
+      const missionControl = element(by.tagName('app-mission-control'));
+      const announceButton = missionControl.all(by.tagName('button')).get(0);
+      announceButton.click().then(() => {
+        const history = missionControl.all(by.tagName('li'));
         expect(history.count()).toBe(1);
         expect(history.get(0).getText()).toMatch(/Mission.* announced/);
       });
     });
 
-    it('should confirm the mission by Lovell', function () {
+    it('should confirm the mission by Lovell', () => {
       testConfirmMission(1, 2, 'Lovell');
     });
 
-    it('should confirm the mission by Haise', function () {
+    it('should confirm the mission by Haise', () => {
       testConfirmMission(3, 3, 'Haise');
     });
 
-    it('should confirm the mission by Swigert', function () {
+    it('should confirm the mission by Swigert', () => {
       testConfirmMission(2, 4, 'Swigert');
     });
 
     function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) {
-      let _confirmedLog = ' confirmed the mission';
-      let missionControl = element(by.tagName('app-mission-control'));
-      let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
-      confirmButton.click().then(function () {
-        let history = missionControl.all(by.tagName('li'));
+      const confirmedLog = ' confirmed the mission';
+      const missionControl = element(by.tagName('app-mission-control'));
+      const confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
+      confirmButton.click().then(() => {
+        const history = missionControl.all(by.tagName('li'));
         expect(history.count()).toBe(expectedLogCount);
-        expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + _confirmedLog);
+        expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + confirmedLog);
       });
     }
     // ...

aio/content/examples/component-interaction/src/app/app.module.ts

@@ -15,7 +15,7 @@ import { VersionParentComponent } from './version-parent.component';
 import { VoterComponent } from './voter.component';
 import { VoteTakerComponent } from './votetaker.component';
 
-let directives: any[] = [
+const directives: any[] = [
     AppComponent,
     AstronautComponent,
     CountdownTimerComponent,
@@ -30,7 +30,7 @@ let directives: any[] = [
     VoteTakerComponent
   ];
 
-let schemas: any[] = [];
+const schemas: any[] = [];
 
 // Include Countdown examples
 // unless in e2e tests which they break.
@@ -49,6 +49,6 @@ if (!/e2e/.test(location.search)) {
   ],
   declarations: directives,
   bootstrap: [ AppComponent ],
-  schemas: schemas
+  schemas
 })
 export class AppModule { }

aio/content/examples/component-interaction/src/app/hero-child.component.ts

@@ -12,6 +12,6 @@ import { Hero } from './hero';
 })
 export class HeroChildComponent {
   @Input() hero: Hero;
-  @Input('master') masterName: string;
+  @Input('master') masterName: string; // tslint:disable-line: no-input-rename
 }
 // #enddocregion

aio/content/examples/component-interaction/src/app/missioncontrol.component.ts

@@ -34,7 +34,7 @@ export class MissionControlComponent {
   }
 
   announce() {
-    let mission = this.missions[this.nextMission++];
+    const mission = this.missions[this.nextMission++];
     this.missionService.announceMission(mission);
     this.history.push(`Mission "${mission}" announced`);
     if (this.nextMission >= this.missions.length) { this.nextMission = 0; }

aio/content/examples/component-interaction/src/app/name-child.component.ts

@@ -1,3 +1,4 @@
+// tslint:disable: variable-name
 // #docregion
 import { Component, Input } from '@angular/core';
 
@@ -6,13 +7,11 @@ import { Component, Input } from '@angular/core';
   template: '<h3>"{{name}}"</h3>'
 })
 export class NameChildComponent {
-  private _name = '';
-
   @Input()
+  get name(): string { return this._name; }
   set name(name: string) {
     this._name = (name && name.trim()) || '<no name set>';
   }
-
-  get name(): string { return this._name; }
+  private _name = '';
 }
 // #enddocregion

aio/content/examples/component-interaction/src/app/version-child.component.ts

@@ -18,14 +18,14 @@ export class VersionChildComponent implements OnChanges {
   changeLog: string[] = [];
 
   ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
-    let log: string[] = [];
-    for (let propName in changes) {
-      let changedProp = changes[propName];
-      let to = JSON.stringify(changedProp.currentValue);
+    const log: string[] = [];
+    for (const propName in changes) {
+      const changedProp = changes[propName];
+      const to = JSON.stringify(changedProp.currentValue);
       if (changedProp.isFirstChange()) {
         log.push(`Initial value of ${propName} set to ${to}`);
       } else {
-        let from = JSON.stringify(changedProp.previousValue);
+        const from = JSON.stringify(changedProp.previousValue);
         log.push(`${propName} changed from ${from} to ${to}`);
       }
     }

aio/content/examples/component-styles/e2e/src/app.e2e-spec.ts

@@ -1,16 +1,14 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by } from 'protractor';
 
-describe('Component Style Tests', function () {
+describe('Component Style Tests', () => {
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('scopes component styles to component view', function() {
-    let componentH1 = element(by.css('app-root > h1'));
-    let externalH1 = element(by.css('body > h1'));
+  it('scopes component styles to component view', () => {
+    const componentH1 = element(by.css('app-root > h1'));
+    const externalH1 = element(by.css('body > h1'));
 
     // Note: sometimes webdriver returns the fontWeight as "normal",
     // other times as "400", both of which are equal in CSS terms.
@@ -19,49 +17,49 @@ describe('Component Style Tests', function () {
   });
 
 
-  it('allows styling :host element', function() {
-    let host = element(by.css('app-hero-details'));
+  it('allows styling :host element', () => {
+    const host = element(by.css('app-hero-details'));
 
     expect(host.getCssValue('borderWidth')).toEqual('1px');
   });
 
-  it('supports :host() in function form', function() {
-    let host = element(by.css('app-hero-details'));
+  it('supports :host() in function form', () => {
+    const host = element(by.css('app-hero-details'));
 
     host.element(by.buttonText('Activate')).click();
     expect(host.getCssValue('borderWidth')).toEqual('3px');
   });
 
-  it('allows conditional :host-context() styling', function() {
-    let h2 = element(by.css('app-hero-details h2'));
+  it('allows conditional :host-context() styling', () => {
+    const h2 = element(by.css('app-hero-details h2'));
 
     expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
   });
 
-  it('styles both view and content children with /deep/', function() {
-    let viewH3 = element(by.css('app-hero-team h3'));
-    let contentH3 = element(by.css('app-hero-controls h3'));
+  it('styles both view and content children with /deep/', () => {
+    const viewH3 = element(by.css('app-hero-team h3'));
+    const contentH3 = element(by.css('app-hero-controls h3'));
 
     expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
     expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
   });
 
-  it('includes styles loaded with CSS @import', function() {
-    let host = element(by.css('app-hero-details'));
+  it('includes styles loaded with CSS @import', () => {
+    const host = element(by.css('app-hero-details'));
 
     expect(host.getCssValue('padding')).toEqual('10px');
   });
 
-  it('processes template inline styles', function() {
-    let button = element(by.css('app-hero-controls button'));
-    let externalButton = element(by.css('body > button'));
+  it('processes template inline styles', () => {
+    const button = element(by.css('app-hero-controls button'));
+    const externalButton = element(by.css('body > button'));
     expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
     expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
   });
 
-  it('processes template <link>s', function() {
-    let li = element(by.css('app-hero-team li:first-child'));
-    let externalLi = element(by.css('body > ul li'));
+  it('processes template <link>s', () => {
+    const li = element(by.css('app-hero-team li:first-child'));
+    const externalLi = element(by.css('body > ul li'));
 
     expect(li.getCssValue('listStyleType')).toEqual('square');
     expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');

aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts

@@ -1,76 +1,74 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by } from 'protractor';
 
-describe('Dependency Injection Cookbook', function () {
+describe('Dependency Injection Cookbook', () => {
 
-    beforeAll(function () {
+    beforeAll(() => {
         browser.get('');
     });
 
-    it('should render Logged in User example', function () {
-      let loggedInUser = element.all(by.xpath('//h3[text()="Logged in user"]')).get(0);
+    it('should render Logged in User example', () => {
+      const loggedInUser = element.all(by.xpath('//h3[text()="Logged in user"]')).get(0);
       expect(loggedInUser).toBeDefined();
     });
 
-    it('"Bombasto" should be the logged in user', function () {
-      let loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0);
+    it('"Bombasto" should be the logged in user', () => {
+      const loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0);
       expect(loggedInUser).toBeDefined();
     });
 
-    it('should render sorted heroes', function () {
-      let sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0);
+    it('should render sorted heroes', () => {
+      const sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0);
       expect(sortedHeroes).toBeDefined();
     });
 
-    it('Dr Nice should be in sorted heroes', function () {
-      let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Dr Nice" and position()=2]')).get(0);
+    it('Dr Nice should be in sorted heroes', () => {
+      const sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Dr Nice" and position()=2]')).get(0);
       expect(sortedHero).toBeDefined();
     });
 
-    it('RubberMan should be in sorted heroes', function () {
-      let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0);
+    it('RubberMan should be in sorted heroes', () => {
+      const sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0);
       expect(sortedHero).toBeDefined();
     });
 
-    it('Magma should be in sorted heroes', function () {
-      let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Magma"]')).get(0);
+    it('Magma should be in sorted heroes', () => {
+      const sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Magma"]')).get(0);
       expect(sortedHero).toBeDefined();
     });
 
-    it('should render Hero of the Month', function () {
-      let heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
+    it('should render Hero of the Month', () => {
+      const heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
       expect(heroOfTheMonth).toBeDefined();
     });
 
-    it('should render Hero Bios', function () {
-      let heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
+    it('should render Hero Bios', () => {
+      const heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
       expect(heroBios).toBeDefined();
     });
 
-    it('should render Magma\'s description in Hero Bios', function () {
-      let magmaText =  element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0);
+    it('should render Magma\'s description in Hero Bios', () => {
+      const magmaText =  element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0);
       expect(magmaText).toBeDefined();
     });
 
-    it('should render Magma\'s phone in Hero Bios and Contacts', function () {
-      let magmaPhone =  element.all(by.xpath('//div[text()="Phone #: 555-555-5555"]')).get(0);
+    it('should render Magma\'s phone in Hero Bios and Contacts', () => {
+      const magmaPhone =  element.all(by.xpath('//div[text()="Phone #: 555-555-5555"]')).get(0);
       expect(magmaPhone).toBeDefined();
     });
 
-    it('should render Hero-of-the-Month runner-ups', function () {
-      let runnersUp =  element(by.id('rups1')).getText();
+    it('should render Hero-of-the-Month runner-ups', () => {
+      const runnersUp =  element(by.id('rups1')).getText();
       expect(runnersUp).toContain('RubberMan, Dr Nice');
     });
 
-    it('should render DateLogger log entry in Hero-of-the-Month', function () {
-      let logs =  element.all(by.id('logs')).get(0).getText();
+    it('should render DateLogger log entry in Hero-of-the-Month', () => {
+      const logs =  element.all(by.id('logs')).get(0).getText();
       expect(logs).toContain('INFO: starting up at');
     });
 
-    it('should highlight Hero Bios and Contacts container when mouseover', function () {
-      let target = element(by.css('div[appHighlight="yellow"]'));
-      let yellow = 'rgba(255, 255, 0, 1)';
+    it('should highlight Hero Bios and Contacts container when mouseover', () => {
+      const target = element(by.css('div[appHighlight="yellow"]'));
+      const yellow = 'rgba(255, 255, 0, 1)';
 
       expect(target.getCssValue('background-color')).not.toEqual(yellow);
 
@@ -81,25 +79,25 @@ describe('Dependency Injection Cookbook', function () {
       browser.wait(() => target.getCssValue('background-color').then(c => c === yellow), 2000);
     });
 
-    describe('in Parent Finder', function () {
-      let cathy1 = element(by.css('alex cathy'));
-      let craig1 = element(by.css('alex craig'));
-      let carol1 = element(by.css('alex carol p'));
-      let carol2 = element(by.css('barry carol p'));
+    describe('in Parent Finder', () => {
+      const cathy1 = element(by.css('alex cathy'));
+      const craig1 = element(by.css('alex craig'));
+      const carol1 = element(by.css('alex carol p'));
+      const carol2 = element(by.css('barry carol p'));
 
-      it('"Cathy" should find "Alex" via the component class', function () {
+      it('"Cathy" should find "Alex" via the component class', () => {
         expect(cathy1.getText()).toContain('Found Alex via the component');
       });
 
-      it('"Craig" should not find "Alex" via the base class', function () {
+      it('"Craig" should not find "Alex" via the base class', () => {
         expect(craig1.getText()).toContain('Did not find Alex via the base');
       });
 
-      it('"Carol" within "Alex" should have "Alex" parent', function () {
+      it('"Carol" within "Alex" should have "Alex" parent', () => {
         expect(carol1.getText()).toContain('Alex');
       });
 
-      it('"Carol" within "Barry" should have "Barry" parent', function () {
+      it('"Carol" within "Barry" should have "Barry" parent', () => {
         expect(carol2.getText()).toContain('Barry');
       });
     });

aio/content/examples/dependency-injection-in-action/src/app/app.module.ts

@@ -42,11 +42,11 @@ const declarations = [
     ParentFinderComponent,
 ];
 
-const a_components = [AliceComponent, AlexComponent ];
+const componentListA = [ AliceComponent, AlexComponent ];
 
-const b_components = [ BarryComponent, BethComponent, BobComponent ];
+const componentListB = [ BarryComponent, BethComponent, BobComponent ];
 
-const c_components = [
+const componentListC = [
   CarolComponent, ChrisComponent, CraigComponent,
   CathyComponent
 ];
@@ -61,9 +61,9 @@ const c_components = [
   ],
   declarations: [
     declarations,
-    a_components,
-    b_components,
-    c_components,
+    componentListA,
+    componentListB,
+    componentListC,
     StorageComponent,
   ],
   bootstrap: [ AppComponent ],

aio/content/examples/dependency-injection-in-action/src/app/hero-data.ts

@@ -3,7 +3,7 @@ import { Hero } from './hero';
 
 export class HeroData {
   createDb() {
-    let heroes = [
+    const heroes = [
       new Hero(1, 'Windstorm'),
       new Hero(2, 'Bombasto'),
       new Hero(3, 'Magneta'),

aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts

@@ -1,5 +1,4 @@
-/* tslint:disable:no-unused-variable component-selector-name one-line check-open-brace */
-/* tslint:disable:*/
+// tslint:disable: component-selector space-before-function-paren
 // #docplaster
 // #docregion
 import { Component, forwardRef, Optional, SkipSelf } from '@angular/core';
@@ -20,8 +19,7 @@ const DifferentParent = Parent;
 // The `parentType` defaults to `Parent` when omitting the second parameter.
 // #docregion provide-the-parent
 export function provideParent
-// #enddocregion provide-parent, provide-the-parent
-// #docregion provide-parent
+// #enddocregion provide-the-parent
   (component: any, parentType?: any) {
     return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
   }

aio/content/examples/dependency-injection-in-action/src/app/runners-up.ts

@@ -22,5 +22,5 @@ export function runnersUpFactory(take: number) {
           .join(', ');
 // #docregion factory-synopsis
   };
-};
+}
 // #enddocregion factory-synopsis

aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts

@@ -24,7 +24,7 @@ export class UserContextService {
   // #enddocregion ctor, injectables
 
   loadUser(userId: number) {
-    let user = this.userService.getUserById(userId);
+    const user = this.userService.getUserById(userId);
     this.name = user.name;
     this.role = user.role;
 

aio/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts

@@ -1,202 +1,196 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by, ElementFinder } from 'protractor';
 
-describe('Dependency Injection Tests', function () {
+describe('Dependency Injection Tests', () => {
 
   let expectedMsg: string;
   let expectedMsgRx: RegExp;
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  describe('Cars:', function() {
+  describe('Cars:', () => {
 
-    it('DI car displays as expected', function () {
+    it('DI car displays as expected', () => {
       expectedMsg = 'DI car with 4 cylinders and Flintstone tires.';
       expect(element(by.css('#di')).getText()).toEqual(expectedMsg);
     });
 
-    it('No DI car displays as expected', function () {
+    it('No DI car displays as expected', () => {
       expectedMsg = 'No DI car with 4 cylinders and Flintstone tires.';
       expect(element(by.css('#nodi')).getText()).toEqual(expectedMsg);
     });
 
-    it('Injector car displays as expected', function () {
+    it('Injector car displays as expected', () => {
       expectedMsg = 'Injector car with 4 cylinders and Flintstone tires.';
       expect(element(by.css('#injector')).getText()).toEqual(expectedMsg);
     });
 
-    it('Factory car displays as expected', function () {
+    it('Factory car displays as expected', () => {
       expectedMsg = 'Factory car with 4 cylinders and Flintstone tires.';
       expect(element(by.css('#factory')).getText()).toEqual(expectedMsg);
     });
 
-    it('Simple car displays as expected', function () {
+    it('Simple car displays as expected', () => {
       expectedMsg = 'Simple car with 4 cylinders and Flintstone tires.';
       expect(element(by.css('#simple')).getText()).toEqual(expectedMsg);
     });
 
-    it('Super car displays as expected', function () {
+    it('Super car displays as expected', () => {
       expectedMsg = 'Super car with 12 cylinders and Flintstone tires.';
       expect(element(by.css('#super')).getText()).toEqual(expectedMsg);
     });
 
-    it('Test car displays as expected', function () {
+    it('Test car displays as expected', () => {
       expectedMsg = 'Test car with 8 cylinders and YokoGoodStone tires.';
       expect(element(by.css('#test')).getText()).toEqual(expectedMsg);
     });
   });
 
-  describe('Other Injections:', function() {
-    it('DI car displays as expected', function () {
+  describe('Other Injections:', () => {
+    it('DI car displays as expected', () => {
       expectedMsg = 'DI car with 4 cylinders and Flintstone tires.';
       expect(element(by.css('#car')).getText()).toEqual(expectedMsg);
     });
 
-    it('Hero displays as expected', function () {
+    it('Hero displays as expected', () => {
       expectedMsg = 'Dr Nice';
       expect(element(by.css('#hero')).getText()).toEqual(expectedMsg);
     });
 
-    it('Optional injection displays as expected', function () {
+    it('Optional injection displays as expected', () => {
       expectedMsg = 'R.O.U.S.\'s? I don\'t think they exist!';
       expect(element(by.css('#rodent')).getText()).toEqual(expectedMsg);
     });
   });
 
-  describe('Tests:', function() {
+  describe('Tests:', () => {
 
-    it('Tests display as expected', function () {
+    it('Tests display as expected', () => {
       expectedMsgRx = /Tests passed/;
       expect(element(by.css('#tests')).getText()).toMatch(expectedMsgRx);
     });
 
   });
 
-  describe('Provider variations:', function() {
+  describe('Provider variations:', () => {
 
-    it('P1 (class) displays as expected', function () {
+    it('P1 (class) displays as expected', () => {
       expectedMsg = 'Hello from logger provided with Logger class';
       expect(element(by.css('#p1')).getText()).toEqual(expectedMsg);
     });
 
-    it('P3 (provide) displays as expected', function () {
+    it('P3 (provide) displays as expected', () => {
       expectedMsg = 'Hello from logger provided with useClass:Logger';
       expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
     });
 
-    it('P4 (useClass:BetterLogger) displays as expected', function () {
+    it('P4 (useClass:BetterLogger) displays as expected', () => {
       expectedMsg = 'Hello from logger provided with useClass:BetterLogger';
       expect(element(by.css('#p4')).getText()).toEqual(expectedMsg);
     });
 
-    it('P5 (useClass:EvenBetterLogger - dependency)  displays as expected', function () {
+    it('P5 (useClass:EvenBetterLogger - dependency)  displays as expected', () => {
       expectedMsg = 'Message to Bob: Hello from EvenBetterlogger';
       expect(element(by.css('#p5')).getText()).toEqual(expectedMsg);
     });
 
-    it('P6a (no alias) displays as expected', function () {
+    it('P6a (no alias) displays as expected', () => {
       expectedMsg = 'Hello OldLogger (but we want NewLogger)';
       expect(element(by.css('#p6a')).getText()).toEqual(expectedMsg);
     });
 
-    it('P6b (alias) displays as expected', function () {
+    it('P6b (alias) displays as expected', () => {
       expectedMsg = 'Hello from NewLogger (via aliased OldLogger)';
       expect(element(by.css('#p6b')).getText()).toEqual(expectedMsg);
     });
 
-    it('P7 (useValue) displays as expected', function () {
+    it('P7 (useValue) displays as expected', () => {
       expectedMsg = 'Silent logger says "Shhhhh!". Provided via "useValue"';
       expect(element(by.css('#p7')).getText()).toEqual(expectedMsg);
     });
 
-    it('P8 (useFactory) displays as expected', function () {
+    it('P8 (useFactory) displays as expected', () => {
       expectedMsg = 'Hero service injected successfully via heroServiceProvider';
       expect(element(by.css('#p8')).getText()).toEqual(expectedMsg);
     });
 
-    it('P9 (InjectionToken) displays as expected', function () {
+    it('P9 (InjectionToken) displays as expected', () => {
       expectedMsg = 'APP_CONFIG Application title is Dependency Injection';
       expect(element(by.css('#p9')).getText()).toEqual(expectedMsg);
     });
 
-    it('P10 (optional dependency) displays as expected', function () {
+    it('P10 (optional dependency) displays as expected', () => {
       expectedMsg = 'Optional logger was not available';
       expect(element(by.css('#p10')).getText()).toEqual(expectedMsg);
     });
   });
 
-  describe('User/Heroes:', function() {
-    it('User is Bob - unauthorized', function () {
+  describe('User/Heroes:', () => {
+    it('User is Bob - unauthorized', () => {
       expectedMsgRx = /Bob, is not authorized/;
       expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
     });
 
-    it('should have button', function () {
+    it('should have button', () => {
       expect(element.all(by.cssContainingText('button', 'Next User'))
         .get(0).isDisplayed()).toBe(true, '\'Next User\' button should be displayed');
     });
 
-    it('unauthorized user should have multiple unauthorized heroes', function () {
-      let heroes = element.all(by.css('#unauthorized app-hero-list div'));
+    it('unauthorized user should have multiple unauthorized heroes', () => {
+      const heroes = element.all(by.css('#unauthorized app-hero-list div'));
       expect(heroes.count()).toBeGreaterThan(0);
     });
 
-    it('unauthorized user should have no secret heroes', function () {
-      let heroes = element.all(by.css('#unauthorized app-hero-list div'));
+    it('unauthorized user should have no secret heroes', () => {
+      const heroes = element.all(by.css('#unauthorized app-hero-list div'));
       expect(heroes.count()).toBeGreaterThan(0);
 
-      let filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
-        return elem.getText().then((text: string) => {
-          return /secret/.test(text);
-        });
+      const filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
+        return elem.getText().then((text: string) => /secret/.test(text));
       });
 
       expect(filteredHeroes.count()).toEqual(0);
     });
 
-    it('unauthorized user should have no authorized heroes listed', function () {
+    it('unauthorized user should have no authorized heroes listed', () => {
       expect(element.all(by.css('#authorized app-hero-list div')).count()).toEqual(0);
     });
 
-    describe('after button click', function() {
+    describe('after button click', () => {
 
-      beforeAll(function (done: any) {
-        let buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0);
+      beforeAll((done: any) => {
+        const buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0);
         buttonEle.click().then(done, done);
       });
 
-      it('User is Alice  - authorized', function () {
+      it('User is Alice  - authorized', () => {
         expectedMsgRx = /Alice, is authorized/;
         expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
       });
 
-      it('authorized user should have multiple authorized heroes ', function () {
-        let heroes = element.all(by.css('#authorized app-hero-list div'));
+      it('authorized user should have multiple authorized heroes ', () => {
+        const heroes = element.all(by.css('#authorized app-hero-list div'));
         expect(heroes.count()).toBeGreaterThan(0);
       });
 
-      it('authorized user should have multiple authorized heroes with tree-shakeable HeroesService', function () {
-        let heroes = element.all(by.css('#tspAuthorized app-hero-list div'));
+      it('authorized user should have multiple authorized heroes with tree-shakeable HeroesService', () => {
+        const heroes = element.all(by.css('#tspAuthorized app-hero-list div'));
         expect(heroes.count()).toBeGreaterThan(0);
       });
 
-      it('authorized user should have secret heroes', function () {
-        let heroes = element.all(by.css('#authorized app-hero-list div'));
+      it('authorized user should have secret heroes', () => {
+        const heroes = element.all(by.css('#authorized app-hero-list div'));
         expect(heroes.count()).toBeGreaterThan(0);
 
-        let filteredHeroes = heroes.filter(function(elem: ElementFinder, index: number) {
-         return elem.getText().then(function(text: string) {
-            return /secret/.test(text);
-          });
+        const filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
+         return elem.getText().then((text: string) => /secret/.test(text));
         });
 
         expect(filteredHeroes.count()).toBeGreaterThan(0);
       });
 
-      it('authorized user should have no unauthorized heroes listed', function () {
+      it('authorized user should have no unauthorized heroes listed', () => {
         expect(element.all(by.css('#unauthorized app-hero-list div')).count()).toEqual(0);
       });
     });

aio/content/examples/dependency-injection/src/app/car/car-creations.ts

@@ -7,7 +7,7 @@ import { Car, Engine, Tires } from './car';
 export function simpleCar() {
   // #docregion car-ctor-instantiation
   // Simple car with 4 cylinders and Flintstone tires.
-  let car = new Car(new Engine(), new Tires());
+  const car = new Car(new Engine(), new Tires());
   // #enddocregion car-ctor-instantiation
   car.description = 'Simple';
   return car;
@@ -16,30 +16,31 @@ export function simpleCar() {
 
 ///////// example 2 ////////////
 // #docregion car-ctor-instantiation-with-param
-  class Engine2 {
+class Engine2 {
   constructor(public cylinders: number) { }
-  }
+}
 // #enddocregion car-ctor-instantiation-with-param
+
 export function superCar() {
-// #docregion car-ctor-instantiation-with-param
+  // #docregion car-ctor-instantiation-with-param
   // Super car with 12 cylinders and Flintstone tires.
-  let bigCylinders = 12;
-  let car = new Car(new Engine2(bigCylinders), new Tires());
-// #enddocregion car-ctor-instantiation-with-param
+  const bigCylinders = 12;
+  const car = new Car(new Engine2(bigCylinders), new Tires());
+  // #enddocregion car-ctor-instantiation-with-param
   car.description = 'Super';
   return car;
 }
 
 /////////// example 3 //////////
-  // #docregion car-ctor-instantiation-with-mocks
-  class MockEngine extends Engine { cylinders = 8; }
-  class MockTires  extends Tires  { make = 'YokoGoodStone'; }
+// #docregion car-ctor-instantiation-with-mocks
+class MockEngine extends Engine { cylinders = 8; }
+class MockTires  extends Tires  { make = 'YokoGoodStone'; }
 
-  // #enddocregion car-ctor-instantiation-with-mocks
+// #enddocregion car-ctor-instantiation-with-mocks
 export function testCar() {
   // #docregion car-ctor-instantiation-with-mocks
   // Test car with 8 cylinders and YokoGoodStone tires.
-  let car = new Car(new MockEngine(), new MockTires());
+  const car = new Car(new MockEngine(), new MockTires());
   // #enddocregion car-ctor-instantiation-with-mocks
   car.description = 'Test';
   return car;

aio/content/examples/dependency-injection/src/app/car/car-factory.ts

@@ -4,7 +4,7 @@ import { Engine, Tires, Car } from './car';
 // BAD pattern!
 export class CarFactory {
   createCar() {
-    let car = new Car(this.createEngine(), this.createTires());
+    const car = new Car(this.createEngine(), this.createTires());
     car.description = 'Factory';
     return car;
   }

aio/content/examples/dependency-injection/src/app/car/car-injector.ts

@@ -26,14 +26,14 @@ export function useInjector() {
     ]
   });
   // #docregion injector-call
-  let car = injector.get(Car);
+  const car = injector.get(Car);
   // #enddocregion injector-call, injector-create-and-call
   car.description = 'Injector';
 
   injector = Injector.create({
     providers: [{ provide: Logger, deps: [] }]
   });
-  let logger = injector.get(Logger);
+  const logger = injector.get(Logger);
   logger.log('Injector car.drive() said: ' + car.drive());
   return car;
 }

aio/content/examples/dependency-injection/src/app/car/car.component.ts

@@ -27,9 +27,9 @@ import { useInjector }        from './car-injector';
   providers: [Car, Engine, Tires]
 })
 export class CarComponent {
-  factoryCar  = (new CarFactory).createCar();
+  factoryCar  = (new CarFactory()).createCar();
   injectorCar = useInjector();
-  noDiCar     = new CarNoDi;
+  noDiCar     = new CarNoDi();
   simpleCar   = simpleCar();
   superCar    = superCar();
   testCar     = testCar();

aio/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts

@@ -5,7 +5,7 @@ import { Logger }      from '../logger.service';
 import { UserService } from '../user.service';
 
 // #docregion factory
-let heroServiceFactory = (logger: Logger, userService: UserService) => {
+const heroServiceFactory = (logger: Logger, userService: UserService) => {
   return new HeroService(logger, userService.user.isAuthorized);
 };
 // #enddocregion factory

aio/content/examples/dependency-injection/src/app/heroes/hero.service.ts

@@ -17,7 +17,7 @@ export class HeroService {
     private isAuthorized: boolean) { }
 
   getHeroes() {
-    let auth = this.isAuthorized ? 'authorized ' : 'unauthorized';
+    const auth = this.isAuthorized ? 'authorized ' : 'unauthorized';
     this.logger.log(`Getting heroes for ${auth} user.`);
     return HEROES.filter(hero => this.isAuthorized || !hero.isSecret);
   }

aio/content/examples/dependency-injection/src/app/injector.component.ts

@@ -36,7 +36,7 @@ export class InjectorComponent implements OnInit {
   }
 
   get rodent() {
-    let rousDontExist = `R.O.U.S.'s? I don't think they exist!`;
+    const rousDontExist = `R.O.U.S.'s? I don't think they exist!`;
     return this.injector.get(ROUS, rousDontExist);
   }
 }

aio/content/examples/dependency-injection/src/app/providers.component.ts

@@ -18,7 +18,7 @@ const template = '{{log}}';
 
 @Component({
   selector: 'provider-1',
-  template: template,
+  template,
   // #docregion providers-1, providers-logger
   providers: [Logger]
   // #enddocregion providers-1, providers-logger
@@ -35,7 +35,7 @@ export class Provider1Component {
 
 @Component({
   selector: 'provider-3',
-  template: template,
+  template,
   providers:
     // #docregion providers-3
     [{ provide: Logger, useClass: Logger }]
@@ -54,7 +54,7 @@ export class BetterLogger extends Logger {}
 
 @Component({
   selector: 'provider-4',
-  template: template,
+  template,
   providers:
     // #docregion providers-4
     [{ provide: Logger, useClass: BetterLogger }]
@@ -76,7 +76,7 @@ export class EvenBetterLogger extends Logger {
   constructor(private userService: UserService) { super(); }
 
   log(message: string) {
-    let name = this.userService.user.name;
+    const name = this.userService.user.name;
     super.log(`Message to ${name}: ${message}`);
   }
 }
@@ -84,7 +84,7 @@ export class EvenBetterLogger extends Logger {
 
 @Component({
   selector: 'provider-5',
-  template: template,
+  template,
   providers:
     // #docregion providers-5
     [ UserService,
@@ -107,12 +107,12 @@ export class OldLogger {
   logs: string[] = [];
   log(message: string) {
     throw new Error('Should not call the old logger!');
-  };
+  }
 }
 
 @Component({
   selector: 'provider-6a',
-  template: template,
+  template,
   providers:
     // #docregion providers-6a
     [ NewLogger,
@@ -135,7 +135,7 @@ export class Provider6aComponent {
 
 @Component({
   selector: 'provider-6b',
-  template: template,
+  template,
   providers:
     // #docregion providers-6b
     [ NewLogger,
@@ -168,7 +168,7 @@ export const SilentLogger = {
 
 @Component({
   selector: 'provider-7',
-  template: template,
+  template,
   providers:
     // #docregion providers-7
     [{ provide: Logger, useValue: SilentLogger }]
@@ -186,7 +186,7 @@ export class Provider7Component {
 
 @Component({
   selector: 'provider-8',
-  template: template,
+  template,
   providers: [heroServiceProvider, Logger, UserService]
 })
 export class Provider8Component {
@@ -202,7 +202,7 @@ export class Provider8Component {
 
 @Component({
   selector: 'provider-9',
-  template: template,
+  template,
   /*
    // #docregion providers-9-interface
    // FAIL! Can't use interface as provider token
@@ -237,11 +237,11 @@ export class Provider9Component implements OnInit {
 import { Optional } from '@angular/core';
 // #enddocregion import-optional
 
-let some_message = 'Hello from the injected logger';
+const someMessage = 'Hello from the injected logger';
 
 @Component({
   selector: 'provider-10',
-  template: template,
+  template,
   providers: [{ provide: Logger, useValue: null }]
 })
 export class Provider10Component implements OnInit {
@@ -249,7 +249,7 @@ export class Provider10Component implements OnInit {
   // #docregion provider-10-ctor
   constructor(@Optional() private logger?: Logger) {
     if (this.logger) {
-      this.logger.log(some_message);
+      this.logger.log(someMessage);
     }
   }
   // #enddocregion provider-10-ctor

aio/content/examples/dependency-injection/src/app/test.component.ts

@@ -43,7 +43,7 @@ var testResults: {pass: string; message: string};
 
 function expect(actual: any) {
   return {
-    toEqual: function(expected: any){
+    toEqual: (expected: any) => {
       testResults = actual === expected ?
         {pass: 'passed', message: testName} :
         {pass: 'failed', message: `${testName}; expected ${actual} to equal ${expected}.`};

aio/content/examples/dependency-injection/src/app/user.service.ts

@@ -8,8 +8,8 @@ export class User {
 }
 
 // TODO: get the user; don't 'new' it.
-let alice = new User('Alice', true);
-let bob = new User('Bob', false);
+const alice = new User('Alice', true);
+const bob = new User('Bob', false);
 
 @Injectable({
   providedIn: 'root'

aio/content/examples/displaying-data/e2e/src/app.e2e-spec.ts

@@ -1,29 +1,27 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by } from 'protractor';
 
-describe('Displaying Data Tests', function () {
-  let _title = 'Tour of Heroes';
-  let _defaultHero = 'Windstorm';
+describe('Displaying Data Tests', () => {
+  const title = 'Tour of Heroes';
+  const defaultHero = 'Windstorm';
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should display correct title: ' + _title, function () {
-    expect(element(by.css('h1')).getText()).toEqual(_title);
+  it('should display correct title: ' + title, () => {
+    expect(element(by.css('h1')).getText()).toEqual(title);
   });
 
-  it('should have correct default hero:  ' + _defaultHero, function () {
-    expect(element(by.css('h2')).getText()).toContain(_defaultHero);
+  it('should have correct default hero:  ' + defaultHero, () => {
+    expect(element(by.css('h2')).getText()).toContain(defaultHero);
   });
 
- it('should have heroes', function () {
-    let heroEls = element.all(by.css('li'));
+  it('should have heroes', () => {
+    const heroEls = element.all(by.css('li'));
     expect(heroEls.count()).not.toBe(0, 'should have heroes');
   });
 
-  it('should display "there are many heroes!"', function () {
+  it('should display "there are many heroes!"', () => {
     expect(element(by.css('ul ~ p')).getText()).toContain('There are many heroes!');
   });
 });

aio/content/examples/docs-style-guide/e2e/src/app.e2e-spec.ts

@@ -1,15 +1,13 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by } from 'protractor';
 
-describe('Docs Style Guide', function () {
-  let _title = 'Authors Style Guide Sample';
+describe('Docs Style Guide', () => {
+  const title = 'Authors Style Guide Sample';
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should display correct title: ' + _title, function () {
-    expect(element(by.css('h1')).getText()).toEqual(_title);
+  it('should display correct title: ' + title, () => {
+    expect(element(by.css('h1')).getText()).toEqual(title);
   });
 });

aio/content/examples/dynamic-component-loader/e2e/src/app.e2e-spec.ts

@@ -1,18 +1,16 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by } from 'protractor';
 
 /* tslint:disable:quotemark */
-describe('Dynamic Component Loader', function () {
+describe('Dynamic Component Loader', () => {
 
-  beforeEach(function () {
+  beforeEach(() => {
     browser.get('');
   });
 
-  it('should load ad banner', function () {
-    let headline = element(by.xpath("//h4[text()='Featured Hero Profile']"));
-    let name = element(by.xpath("//h3[text()='Bombasto']"));
-    let bio = element(by.xpath("//p[text()='Brave as they come']"));
+  it('should load ad banner', () => {
+    const headline = element(by.xpath("//h4[text()='Featured Hero Profile']"));
+    const name = element(by.xpath("//h3[text()='Bombasto']"));
+    const bio = element(by.xpath("//p[text()='Brave as they come']"));
 
     expect(name).toBeDefined();
     expect(headline).toBeDefined();

aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts

@@ -11,7 +11,7 @@ import { AdComponent } from './ad.component';
   template: `
               <div class="ad-banner-example">
                 <h3>Advertisements</h3>
-                <ng-template ad-host></ng-template>
+                <ng-template adHost></ng-template>
               </div>
             `
   // #enddocregion ad-host
@@ -43,8 +43,8 @@ export class AdBannerComponent implements OnInit, OnDestroy {
     const viewContainerRef = this.adHost.viewContainerRef;
     viewContainerRef.clear();
 
-    const componentRef = viewContainerRef.createComponent(componentFactory);
-    (<AdComponent>componentRef.instance).data = adItem.data;
+    const componentRef = viewContainerRef.createComponent<AdComponent>(componentFactory);
+    componentRef.instance.data = adItem.data;
   }
 
   getAds() {

aio/content/examples/dynamic-component-loader/src/app/ad.directive.ts

@@ -1,8 +1,9 @@
+// tslint:disable: directive-selector
 // #docregion
 import { Directive, ViewContainerRef } from '@angular/core';
 
 @Directive({
-  selector: '[ad-host]',
+  selector: '[adHost]',
 })
 export class AdDirective {
   constructor(public viewContainerRef: ViewContainerRef) { }

aio/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts

@@ -1,27 +1,25 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by } from 'protractor';
 
 /* tslint:disable:quotemark */
-describe('Dynamic Form', function () {
+describe('Dynamic Form', () => {
 
-    beforeAll(function () {
+    beforeAll(() => {
         browser.get('');
     });
 
-    it('should submit form', function () {
-      let firstNameElement = element.all(by.css('input[id=firstName]')).get(0);
+    it('should submit form', () => {
+      const firstNameElement = element.all(by.css('input[id=firstName]')).get(0);
       expect(firstNameElement.getAttribute('value')).toEqual('Bombasto');
 
-      let emailElement = element.all(by.css('input[id=emailAddress]')).get(0);
-      let email = 'test@test.com';
+      const emailElement = element.all(by.css('input[id=emailAddress]')).get(0);
+      const email = 'test@test.com';
       emailElement.sendKeys(email);
       expect(emailElement.getAttribute('value')).toEqual(email);
 
       element(by.css('select option[value="solid"]')).click();
 
-      let saveButton = element.all(by.css('button')).get(0);
-      saveButton.click().then(function() {
+      const saveButton = element.all(by.css('button')).get(0);
+      saveButton.click().then(() => {
         expect(element(by.xpath("//strong[contains(text(),'Saved the following values')]")).isPresent()).toBe(true);
       });
   });

aio/content/examples/dynamic-form/src/app/question-base.ts

@@ -10,13 +10,14 @@ export class QuestionBase<T> {
   options: {key: string, value: string}[];
 
   constructor(options: {
-      value?: T,
-      key?: string,
-      label?: string,
-      required?: boolean,
-      order?: number,
-      controlType?: string,
-      type?: string
+      value?: T;
+      key?: string;
+      label?: string;
+      required?: boolean;
+      order?: number;
+      controlType?: string;
+      type?: string;
+      options?: {key: string, value: string}[];
     } = {}) {
     this.value = options.value;
     this.key = options.key || '';
@@ -25,5 +26,6 @@ export class QuestionBase<T> {
     this.order = options.order === undefined ? 1 : options.order;
     this.controlType = options.controlType || '';
     this.type = options.type || '';
+    this.options = options.options || [];
   }
 }

aio/content/examples/dynamic-form/src/app/question-control.service.ts

@@ -9,7 +9,7 @@ export class QuestionControlService {
   constructor() { }
 
   toFormGroup(questions: QuestionBase<string>[] ) {
-    let group: any = {};
+    const group: any = {};
 
     questions.forEach(question => {
       group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)

aio/content/examples/dynamic-form/src/app/question-dropdown.ts

@@ -3,10 +3,4 @@ import { QuestionBase } from './question-base';
 
 export class DropdownQuestion extends QuestionBase<string> {
   controlType = 'dropdown';
-  options: {key: string, value: string}[] = [];
-
-  constructor(options: {} = {}) {
-    super(options);
-    this.options = options['options'] || [];
-  }
 }

aio/content/examples/dynamic-form/src/app/question-textbox.ts

@@ -3,10 +3,4 @@ import { QuestionBase } from './question-base';
 
 export class TextboxQuestion extends QuestionBase<string> {
   controlType = 'textbox';
-  type: string;
-
-  constructor(options: {} = {}) {
-    super(options);
-    this.type = options['type'] || '';
-  }
 }

aio/content/examples/dynamic-form/src/app/question.service.ts

@@ -12,7 +12,7 @@ export class QuestionService {
   // TODO: get from a remote source of question metadata
   getQuestions() {
 
-    let questions: QuestionBase<string>[] = [
+    const questions: QuestionBase<string>[] = [
 
       new DropdownQuestion({
         key: 'brave',

aio/content/examples/elements/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,3 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, by, element, ElementFinder, ExpectedConditions as EC } from 'protractor';
 
 /* tslint:disable:quotemark */
@@ -16,7 +14,7 @@ describe('Elements', () => {
   const waitForText = (elem: ElementFinder) => {
     // Waiting for the element to have some text, makes the tests less flaky.
     browser.wait(async () => /\S/.test(await elem.getText()), 5000);
-  }
+  };
 
   beforeEach(() => browser.get(''));
 

aio/content/examples/elements/src/app/popup.component.ts

@@ -1,4 +1,6 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+// tslint:disable: variable-name
+// #docregion
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 
 @Component({
@@ -7,9 +9,6 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
     <span>Popup: {{message}}</span>
     <button (click)="closed.next()">&#x2716;</button>
   `,
-  host: {
-    '[@state]': 'state',
-  },
   animations: [
     trigger('state', [
       state('opened', style({transform: 'translateY(0%)'})),
@@ -39,15 +38,16 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
   `]
 })
 export class PopupComponent {
+  @HostBinding('@state')
   state: 'opened' | 'closed' = 'closed';
 
   @Input()
+  get message(): string { return this._message; }
   set message(message: string) {
     this._message = message;
     this.state = 'opened';
   }
-  get message(): string { return this._message; }
-  _message: string;
+  private _message: string;
 
   @Output()
   closed = new EventEmitter();

aio/content/examples/event-binding/e2e/src/app.e2e-spec.ts

@@ -1,26 +1,24 @@
-'use strict'; // necessary for es6 output in node
+import { browser, element, by } from 'protractor';
 
-import { browser, element, by, protractor } from 'protractor';
+describe('Event binding example', () => {
 
-describe('Event binding example', function () {
-
-  beforeEach(function () {
+  beforeEach(() => {
     browser.get('');
   });
 
-  let saveButton = element.all(by.css('button')).get(0);
-  let onSaveButton = element.all(by.css('button')).get(1);
-  let myClick = element.all(by.css('button')).get(2);
-  let deleteButton = element.all(by.css('button')).get(3);
-  let saveNoProp = element.all(by.css('button')).get(4);
-  let saveProp = element.all(by.css('button')).get(5);
+  const saveButton = element.all(by.css('button')).get(0);
+  const onSaveButton = element.all(by.css('button')).get(1);
+  const myClick = element.all(by.css('button')).get(2);
+  const deleteButton = element.all(by.css('button')).get(3);
+  const saveNoProp = element.all(by.css('button')).get(4);
+  const saveProp = element.all(by.css('button')).get(5);
 
 
-  it('should display Event Binding with Angular', function () {
+  it('should display Event Binding with Angular', () => {
     expect(element(by.css('h1')).getText()).toEqual('Event Binding');
   });
 
-  it('should display 6 buttons', function() {
+  it('should display 6 buttons', () => {
     expect(saveButton.getText()).toBe('Save');
     expect(onSaveButton.getText()).toBe('on-click Save');
     expect(myClick.getText()).toBe('click with myClick');
@@ -29,24 +27,23 @@ describe('Event binding example', function () {
     expect(saveProp.getText()).toBe('Save with propagation');
   });
 
-  it('should support user input', function () {
-    let input = element(by.css('input'));
-    let bindingResult = element.all(by.css('h4')).get(1);
+  it('should support user input', () => {
+    const input = element(by.css('input'));
+    const bindingResult = element.all(by.css('h4')).get(1);
     expect(bindingResult.getText()).toEqual('Result: teapot');
     input.sendKeys('abc');
     expect(bindingResult.getText()).toEqual('Result: teapotabc');
   });
 
   it('should hide the item img', async () => {
-    let deleteButton = element.all(by.css('button')).get(3);
     await deleteButton.click();
     browser.switchTo().alert().accept();
     expect(element.all(by.css('img')).get(0).getCssValue('display')).toEqual('none');
   });
 
   it('should show two alerts', async () => {
-    let parentDiv = element.all(by.css('.parent-div'));
-    let childDiv = element.all(by.css('div > div')).get(1);
+    const parentDiv = element.all(by.css('.parent-div'));
+    const childDiv = element.all(by.css('div > div')).get(1);
     await parentDiv.click();
     browser.switchTo().alert().accept();
     expect(childDiv.getText()).toEqual('Click me too! (child)');

aio/content/examples/event-binding/src/app/app.component.ts

@@ -12,7 +12,7 @@ export class AppComponent {
   clickMessage = '';
 
   onSave(event?: KeyboardEvent) {
-    const evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).textContent : '';
+    const evtMsg = event ? ' Event target is ' + (event.target as HTMLElement).textContent : '';
     alert('Saved.' + evtMsg);
     if (event) { event.stopPropagation(); }
   }
@@ -22,7 +22,7 @@ export class AppComponent {
   }
 
   onClickMe(event?: KeyboardEvent) {
-    const evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className  : '';
+    const evtMsg = event ? ' Event target class is ' + (event.target as HTMLElement).className  : '';
     alert('Click me.' + evtMsg);
   }
 

aio/content/examples/event-binding/src/app/click.directive.ts

@@ -1,4 +1,4 @@
-/* tslint:disable use-output-property-decorator directive-class-suffix */
+// tslint:disable: directive-selector
 import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
 
 @Directive({selector: '[myClick]'})

aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts

@@ -1,11 +1,9 @@
-'use strict'; // necessary for node!
-
 import { browser, element, by, protractor, ElementFinder, ElementArrayFinder } from 'protractor';
 
 // THESE TESTS ARE INCOMPLETE
-describe('Form Validation Tests', function () {
+describe('Form Validation Tests', () => {
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
@@ -52,11 +50,11 @@ let page: {
 };
 
 function getPage(sectionTag: string) {
-  let section = element(by.css(sectionTag));
-  let buttons = section.all(by.css('button'));
+  const section = element(by.css(sectionTag));
+  const buttons = section.all(by.css('button'));
 
   page = {
-    section: section,
+    section,
     form: section.element(by.css('form')),
     title: section.element(by.css('h1')),
     nameInput: section.element(by.css('#name')),
@@ -73,31 +71,31 @@ function getPage(sectionTag: string) {
 
 function tests(title: string) {
 
-  it('should display correct title', function () {
+  it('should display correct title', () => {
     expect(page.title.getText()).toContain(title);
   });
 
-  it('should not display submitted message before submit', function () {
+  it('should not display submitted message before submit', () => {
     expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(false);
   });
 
-  it('should have form buttons', function () {
+  it('should have form buttons', () => {
     expect(page.heroFormButtons.count()).toEqual(2);
   });
 
-  it('should have error at start', function () {
+  it('should have error at start', () => {
     expectFormIsInvalid();
   });
 
-  // it('showForm', function () {
+  // it('showForm', () => {
   //   page.form.getInnerHtml().then(html => console.log(html));
   // });
 
-  it('should have disabled submit button', function () {
+  it('should have disabled submit button', () => {
     expect(page.heroFormButtons.get(0).isEnabled()).toBe(false);
   });
 
-  it('resetting name to valid name should clear errors', function () {
+  it('resetting name to valid name should clear errors', () => {
     const ele = page.nameInput;
     expect(ele.isPresent()).toBe(true, 'nameInput should exist');
     ele.clear();
@@ -105,7 +103,7 @@ function tests(title: string) {
     expectFormIsValid();
   });
 
-  it('should produce "required" error after clearing name', function () {
+  it('should produce "required" error after clearing name', () => {
     page.nameInput.clear();
     // page.alterEgoInput.click(); // to blur ... didn't work
     page.nameInput.sendKeys('x', protractor.Key.BACK_SPACE); // ugh!
@@ -113,37 +111,37 @@ function tests(title: string) {
     expect(page.errorMessages.get(0).getText()).toContain('required');
   });
 
-  it('should produce "at least 4 characters" error when name="x"', function () {
+  it('should produce "at least 4 characters" error when name="x"', () => {
     page.nameInput.clear();
     page.nameInput.sendKeys('x'); // too short
     expectFormIsInvalid();
     expect(page.errorMessages.get(0).getText()).toContain('at least 4 characters');
   });
 
-  it('resetting name to valid name again should clear errors', function () {
+  it('resetting name to valid name again should clear errors', () => {
     page.nameInput.sendKeys(testName);
     expectFormIsValid();
   });
 
-  it('should have enabled submit button', function () {
+  it('should have enabled submit button', () => {
     const submitBtn = page.heroFormButtons.get(0);
     expect(submitBtn.isEnabled()).toBe(true);
   });
 
-  it('should hide form after submit', function () {
+  it('should hide form after submit', () => {
     page.heroFormButtons.get(0).click();
     expect(page.heroFormButtons.get(0).isDisplayed()).toBe(false);
   });
 
-  it('submitted form should be displayed', function () {
+  it('submitted form should be displayed', () => {
     expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(true);
   });
 
-  it('submitted form should have new hero name', function () {
+  it('submitted form should have new hero name', () => {
     expect(page.heroSubmitted.getText()).toContain(testName);
   });
 
-  it('clicking edit button should reveal form again', function () {
+  it('clicking edit button should reveal form again', () => {
     const newFormBtn = page.heroSubmitted.element(by.css('button'));
     newFormBtn.click();
     expect(page.heroSubmitted.isElementPresent(by.css('p')))
@@ -162,7 +160,7 @@ function expectFormIsInvalid() {
 
 function triggerAlterEgoValidation() {
   // alterEgo has updateOn set to 'blur', click outside of the input to trigger the blur event
-  element(by.css('app-root')).click()
+  element(by.css('app-root')).click();
 }
 
 function waitForAlterEgoValidation() {
@@ -173,7 +171,7 @@ function waitForAlterEgoValidation() {
 function bobTests() {
   const emsg = 'Name cannot be Bob.';
 
-  it('should produce "no bob" error after setting name to "Bobby"', function () {
+  it('should produce "no bob" error after setting name to "Bobby"', () => {
     // Re-populate select element
     page.powerSelect.click();
     page.powerOption.click();
@@ -184,7 +182,7 @@ function bobTests() {
     expect(page.errorMessages.get(0).getText()).toBe(emsg);
   });
 
-  it('should be ok again with valid name', function () {
+  it('should be ok again with valid name', () => {
     page.nameInput.clear();
     page.nameInput.sendKeys(testName);
     expectFormIsValid();
@@ -194,7 +192,7 @@ function bobTests() {
 function asyncValidationTests() {
   const emsg = 'Alter ego is already taken.';
 
-  it(`should produce "${emsg}" error after setting alterEgo to Eric`, function () {
+  it(`should produce "${emsg}" error after setting alterEgo to Eric`, () => {
     page.alterEgoInput.clear();
     page.alterEgoInput.sendKeys('Eric');
 
@@ -205,7 +203,7 @@ function asyncValidationTests() {
     expect(page.alterEgoErrors.getText()).toBe(emsg);
   });
 
-  it('should be ok again with different values', function () {
+  it('should be ok again with different values', () => {
     page.alterEgoInput.clear();
     page.alterEgoInput.sendKeys('John');
 
@@ -220,7 +218,7 @@ function asyncValidationTests() {
 function crossValidationTests() {
   const emsg = 'Name cannot match alter ego.';
 
-  it(`should produce "${emsg}" error after setting name and alter ego to the same value`, function () {
+  it(`should produce "${emsg}" error after setting name and alter ego to the same value`, () => {
     page.nameInput.clear();
     page.nameInput.sendKeys('Batman');
 
@@ -234,7 +232,7 @@ function crossValidationTests() {
     expect(page.crossValidationErrorMessage.getText()).toBe(emsg);
   });
 
-  it('should be ok again with different values', function () {
+  it('should be ok again with different values', () => {
     page.nameInput.clear();
     page.nameInput.sendKeys('Batman');
 

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.1.ts

@@ -22,13 +22,13 @@ export class HeroFormReactiveComponent implements OnInit {
   ngOnInit(): void {
     // #docregion custom-validator
     this.heroForm = new FormGroup({
-      'name': new FormControl(this.hero.name, [
+      name: new FormControl(this.hero.name, [
         Validators.required,
         Validators.minLength(4),
         forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
       ]),
-      'alterEgo': new FormControl(this.hero.alterEgo),
-      'power': new FormControl(this.hero.power, Validators.required)
+      alterEgo: new FormControl(this.hero.alterEgo),
+      power: new FormControl(this.hero.power, Validators.required)
     });
     // #enddocregion custom-validator
 

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.2.ts

@@ -22,16 +22,16 @@ export class HeroFormReactiveComponent implements OnInit {
   ngOnInit(): void {
     // #docregion async-validation
     this.heroForm = new FormGroup({
-      'name': new FormControl(this.hero.name, [
+      name: new FormControl(this.hero.name, [
         Validators.required,
         Validators.minLength(4),
         forbiddenNameValidator(/bob/i)
       ]),
-      'alterEgo': new FormControl(this.hero.alterEgo, {
+      alterEgo: new FormControl(this.hero.alterEgo, {
         asyncValidators: [this.alterEgoValidator.validate.bind(this.alterEgoValidator)],
         updateOn: 'blur'
       }),
-      'power': new FormControl(this.hero.power, Validators.required)
+      power: new FormControl(this.hero.power, Validators.required)
     });
     // #enddocregion async-validation
   }

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts

@@ -21,16 +21,16 @@ export class HeroFormReactiveComponent implements OnInit {
 
   ngOnInit(): void {
     this.heroForm = new FormGroup({
-      'name': new FormControl(this.hero.name, [
+      name: new FormControl(this.hero.name, [
         Validators.required,
         Validators.minLength(4),
         forbiddenNameValidator(/bob/i)
       ]),
-      'alterEgo': new FormControl(this.hero.alterEgo, {
+      alterEgo: new FormControl(this.hero.alterEgo, {
         asyncValidators: [this.alterEgoValidator.validate.bind(this.alterEgoValidator)],
         updateOn: 'blur'
       }),
-      'power': new FormControl(this.hero.power, Validators.required)
+      power: new FormControl(this.hero.power, Validators.required)
     },  { validators: identityRevealedValidator }); // <-- add custom validator at the FormGroup level
   }
 

aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts

@@ -7,7 +7,7 @@ import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } fr
 export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
   return (control: AbstractControl): {[key: string]: any} | null => {
     const forbidden = nameRe.test(control.value);
-    return forbidden ? {'forbiddenName': {value: control.value}} : null;
+    return forbidden ? {forbiddenName: {value: control.value}} : null;
   };
 }
 // #enddocregion custom-validator

aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts

@@ -8,7 +8,7 @@ export const identityRevealedValidator: ValidatorFn = (control: FormGroup): Vali
   const name = control.get('name');
   const alterEgo = control.get('alterEgo');
 
-  return name && alterEgo && name.value === alterEgo.value ? { 'identityRevealed': true } : null;
+  return name && alterEgo && name.value === alterEgo.value ? { identityRevealed: true } : null;
 };
 // #enddocregion cross-validation-validator
 
@@ -19,7 +19,7 @@ export const identityRevealedValidator: ValidatorFn = (control: FormGroup): Vali
 })
 export class IdentityRevealedValidatorDirective implements Validator {
   validate(control: AbstractControl): ValidationErrors {
-    return identityRevealedValidator(control)
+    return identityRevealedValidator(control);
   }
 }
 // #enddocregion cross-validation-directive

aio/content/examples/forms-overview/e2e/src/app.e2e-spec.ts

@@ -1,8 +1,8 @@
 import { browser, element, by } from 'protractor';
 
-describe('Forms Overview Tests', function () {
+describe('Forms Overview Tests', () => {
 
-  beforeEach(function () {
+  beforeEach(() => {
     browser.get('');
   });
 

aio/content/examples/forms-overview/src/app/app.component.spec.ts

@@ -1,27 +1,27 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
+
 import { AppComponent } from './app.component';
-import { TemplateModule } from './template/template.module';
 import { ReactiveModule } from './reactive/reactive.module';
+import { TemplateModule } from './template/template.module';
 
 describe('AppComponent', () => {
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(waitForAsync(() => {
+    TestBed
+        .configureTestingModule({
           imports: [ReactiveModule, TemplateModule],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
+          declarations: [AppComponent],
+        })
+        .compileComponents();
   }));
 
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
        const fixture = TestBed.createComponent(AppComponent);
        const app = fixture.componentInstance;
 
        expect(app).toBeTruthy();
      }));
 
-  it('should render title', async(() => {
+  it('should render title', waitForAsync(() => {
        const fixture = TestBed.createComponent(AppComponent);
        fixture.detectChanges();
 

aio/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.spec.ts

@@ -1,18 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { FavoriteColorComponent } from './favorite-color.component';
 import { createNewEvent } from '../../shared/utils';
+import { FavoriteColorComponent } from './favorite-color.component';
 
 describe('Favorite Color Component', () => {
   let component: FavoriteColorComponent;
   let fixture: ComponentFixture<FavoriteColorComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [ ReactiveFormsModule ],
-      declarations: [ FavoriteColorComponent ]
-    })
+  beforeEach(waitForAsync(() => {
+    TestBed
+        .configureTestingModule(
+            {imports: [ReactiveFormsModule], declarations: [FavoriteColorComponent]})
         .compileComponents();
   }));
 

aio/content/examples/forms-overview/src/app/shared/utils.ts

@@ -1,5 +1,5 @@
 export function createNewEvent(eventName: string, bubbles = false, cancelable = false) {
-  let evt = document.createEvent('CustomEvent');
+  const evt = document.createEvent('CustomEvent');
   evt.initCustomEvent(eventName, bubbles, cancelable, null);
   return evt;
 }

aio/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.spec.ts

@@ -1,18 +1,15 @@
-import { async, ComponentFixture, TestBed, tick, fakeAsync } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 
-import { FavoriteColorComponent } from './favorite-color.component';
 import { createNewEvent } from '../../shared/utils';
+import { FavoriteColorComponent } from './favorite-color.component';
 
 describe('FavoriteColorComponent', () => {
   let component: FavoriteColorComponent;
   let fixture: ComponentFixture<FavoriteColorComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [ FormsModule ],
-      declarations: [ FavoriteColorComponent ]
-    })
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({imports: [FormsModule], declarations: [FavoriteColorComponent]})
         .compileComponents();
   }));
 

aio/content/examples/forms/e2e/src/app.e2e-spec.ts

@@ -1,60 +1,60 @@
 import { browser, element, by } from 'protractor';
 
-describe('Forms Tests', function () {
+describe('Forms Tests', () => {
 
-  beforeEach(function () {
+  beforeEach(() => {
     browser.get('');
   });
 
-  it('should display correct title', function () {
+  it('should display correct title', () => {
     expect(element.all(by.css('h1')).get(0).getText()).toEqual('Hero Form');
   });
 
 
-  it('should not display message before submit', function () {
-    let ele = element(by.css('h2'));
+  it('should not display message before submit', () => {
+    const ele = element(by.css('h2'));
     expect(ele.isDisplayed()).toBe(false);
   });
 
-  it('should hide form after submit', function () {
-    let ele = element.all(by.css('h1')).get(0);
+  it('should hide form after submit', () => {
+    const ele = element.all(by.css('h1')).get(0);
     expect(ele.isDisplayed()).toBe(true);
-    let b = element.all(by.css('button[type=submit]')).get(0);
-    b.click().then(function() {
+    const b = element.all(by.css('button[type=submit]')).get(0);
+    b.click().then(() => {
       expect(ele.isDisplayed()).toBe(false);
     });
   });
 
-  it('should display message after submit', function () {
-    let b = element.all(by.css('button[type=submit]')).get(0);
-    b.click().then(function() {
+  it('should display message after submit', () => {
+    const b = element.all(by.css('button[type=submit]')).get(0);
+    b.click().then(() => {
       expect(element(by.css('h2')).getText()).toContain('You submitted the following');
     });
   });
 
-  it('should hide form after submit', function () {
-    let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
+  it('should hide form after submit', () => {
+    const alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
     expect(alterEgoEle.isDisplayed()).toBe(true);
-    let submitButtonEle = element.all(by.css('button[type=submit]')).get(0);
-    submitButtonEle.click().then(function() {
+    const submitButtonEle = element.all(by.css('button[type=submit]')).get(0);
+    submitButtonEle.click().then(() => {
       expect(alterEgoEle.isDisplayed()).toBe(false);
     });
   });
 
-  it('should reflect submitted data after submit', function () {
-    let test = 'testing 1 2 3';
+  it('should reflect submitted data after submit', () => {
+    const test = 'testing 1 2 3';
     let newValue: string;
-    let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
-    alterEgoEle.getAttribute('value').then(function(value: string) {
+    const alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
+    alterEgoEle.getAttribute('value').then((value: string) => {
       alterEgoEle.sendKeys(test);
       newValue = value + test;
       expect(alterEgoEle.getAttribute('value')).toEqual(newValue);
-      let b = element.all(by.css('button[type=submit]')).get(0);
+      const b = element.all(by.css('button[type=submit]')).get(0);
       return b.click();
-    }).then(function() {
-      let alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego'));
+    }).then(() => {
+      const alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego'));
       expect(alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label');
-      let divEle = element(by.cssContainingText('div', newValue));
+      const divEle = element(by.cssContainingText('div', newValue));
       expect(divEle.isPresent()).toBe(true, 'cannot locate div with this text: ' + newValue);
     });
   });

aio/content/examples/forms/src/app/hero-form/hero-form.component.ts

@@ -35,7 +35,7 @@ export class HeroFormComponent {
 
   skyDog(): Hero {
     // #docregion SkyDog
-    let myHero =  new Hero(42, 'SkyDog',
+    const myHero =  new Hero(42, 'SkyDog',
                            'Fetch any object at any distance',
                            'Leslie Rollover');
     console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog"
@@ -48,9 +48,9 @@ export class HeroFormComponent {
   // Reveal in html:
   //   Name via form.controls = {{showFormControls(heroForm)}}
   showFormControls(form: any) {
-    return form && form.controls['name'] &&
+    return form && form.controls.name &&
     // #docregion form-controls
-    form.controls['name'].value; // Dr. IQ
+    form.controls.name.value; // Dr. IQ
     // #enddocregion form-controls
   }
 

aio/content/examples/getting-started-v0/e2e/src/app.e2e-spec.ts

@@ -1,19 +1,15 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by } from 'protractor';
 
 describe('Getting Started V0', () => {
-  beforeEach(() => {
-    return browser.get('/');
-  });
+  beforeEach(() => browser.get('/'));
 
-  it('should display "My Store" in the top bar', async() => {
+  it('should display "My Store" in the top bar', async () => {
     const title = await element(by.css('app-root app-top-bar h1')).getText();
 
     expect(title).toEqual('My Store');
   });
 
-  it('should display "Products" on the homepage', async() => {
+  it('should display "Products" on the homepage', async () => {
     const title = await element(by.css('app-root app-product-list h2')).getText();
 
     expect(title).toEqual('Products');

aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,3 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, by, ExpectedConditions as EC, logging, ElementFinder, ElementArrayFinder } from 'protractor';
 
 describe('Getting Started', () => {
@@ -15,17 +13,17 @@ describe('Getting Started', () => {
   };
 
   describe('General', () => {
-    beforeAll(async() => {
+    beforeAll(async () => {
       await browser.get('/');
     });
 
-    it('should display "My Store"', async() => {
+    it('should display "My Store"', async () => {
       const title = await pageElements.topBarHeader.getText();
 
       expect(title).toEqual('My Store');
     });
 
-    it('should display "Products" on the homepage', async() => {
+    it('should display "Products" on the homepage', async () => {
       const title = await pageElements.productListHeader.getText();
 
       expect(title).toEqual('Products');
@@ -33,11 +31,11 @@ describe('Getting Started', () => {
   });
 
   describe('Product List', () => {
-    beforeAll(async() => {
+    beforeAll(async () => {
       await browser.get('/');
     });
 
-    it('should display 3 items', async() => {
+    it('should display 3 items', async () => {
       const products = await pageElements.productListItems;
 
       expect(products.length).toEqual(3);
@@ -45,11 +43,11 @@ describe('Getting Started', () => {
   });
 
   describe('Product Details', () => {
-    beforeEach(async() => {
+    beforeEach(async () => {
       await browser.get('/');
     });
 
-    it('should display information for a product', async() => {
+    it('should display information for a product', async () => {
       await pageElements.productListLinks.get(0).click();
 
       const product = pageElements.productDetailsPage;
@@ -63,7 +61,7 @@ describe('Getting Started', () => {
       expect(productDescription).toBe('A large phone with one of the best screens');
     });
 
-    it('should add the product to the cart', async() => {
+    it('should add the product to the cart', async () => {
       await pageElements.productListLinks.get(0).click();
 
       const product = pageElements.productDetailsPage;
@@ -82,11 +80,11 @@ describe('Getting Started', () => {
 
   describe('Cart', () => {
 
-    beforeEach(async() => {
+    beforeEach(async () => {
       await browser.get('/');
     });
 
-    it('should go through the checkout process', async() => {
+    it('should go through the checkout process', async () => {
       await pageElements.productListLinks.get(0).click();
 
       const checkoutLink = pageElements.topBarCheckoutLink;

aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,3 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, by, element } from 'protractor';
 
 describe('Hierarchical dependency injection', () => {
@@ -9,7 +7,7 @@ describe('Hierarchical dependency injection', () => {
   });
 
   describe('Heroes Scenario', () => {
-    let page = {
+    const page = {
       heroName: '',
       income: '',
 

aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts

@@ -1,3 +1,4 @@
+// tslint:disable: no-output-native
 // #docregion
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { HeroTaxReturn } from './hero';
@@ -21,7 +22,7 @@ export class HeroTaxReturnComponent {
   }
 
   @Input()
-  set taxReturn (htr: HeroTaxReturn) {
+  set taxReturn(htr: HeroTaxReturn) {
     this.heroTaxReturnService.taxReturn = htr;
   }
 
@@ -30,9 +31,9 @@ export class HeroTaxReturnComponent {
   onCanceled()  {
     this.flashMessage('Canceled');
     this.heroTaxReturnService.restoreTaxReturn();
-  };
+  }
 
-  onClose()  { this.close.emit(); };
+  onClose() { this.close.emit(); }
 
   onSaved() {
     this.flashMessage('Saved');

aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts

@@ -10,12 +10,12 @@ export class HeroTaxReturnService {
 
   constructor(private heroService: HeroesService) { }
 
-  set taxReturn (htr: HeroTaxReturn) {
+  set taxReturn(htr: HeroTaxReturn) {
     this.originalTaxReturn = htr;
     this.currentTaxReturn  = htr.clone();
   }
 
-  get taxReturn (): HeroTaxReturn {
+  get taxReturn(): HeroTaxReturn {
     return this.currentTaxReturn;
   }
 

aio/content/examples/http/e2e/src/app.e2e-spec.ts

@@ -24,11 +24,11 @@ const page = {
   uploadMessage: element(by.css('app-uploader p'))
 };
 
-let checkLogForMessage = (message: string) => {
+const checkLogForMessage = (message: string) => {
   expect(page.logList.getText()).toContain(message);
 };
 
-describe('Http Tests', function() {
+describe('Http Tests', () => {
   beforeEach(() => {
     browser.get('');
   });

aio/content/examples/http/src/app/config/config.component.ts

@@ -40,8 +40,8 @@ export class ConfigComponent {
     this.configService.getConfig_1()
   // #docregion v1, v1_callback
       .subscribe((data: Config) => this.config = {
-          heroesUrl: data['heroesUrl'],
-          textfile:  data['textfile']
+          heroesUrl: data.heroesUrl,
+          textfile:  data.textfile
       });
   // #enddocregion v1_callback
   }

aio/content/examples/http/src/app/heroes/heroes.service.ts

@@ -16,7 +16,7 @@ import { HttpErrorHandler, HandleError } from '../http-error-handler.service';
 const httpOptions = {
   headers: new HttpHeaders({
     'Content-Type':  'application/json',
-    'Authorization': 'my-auth-token'
+    Authorization: 'my-auth-token'
   })
 };
 // #enddocregion http-options
@@ -33,7 +33,7 @@ export class HeroesService {
   }
 
   /** GET heroes from the server */
-  getHeroes (): Observable<Hero[]> {
+  getHeroes(): Observable<Hero[]> {
     return this.http.get<Hero[]>(this.heroesUrl)
       .pipe(
         catchError(this.handleError('getHeroes', []))
@@ -60,7 +60,7 @@ export class HeroesService {
 
   // #docregion addHero
   /** POST: add a new hero to the database */
-  addHero (hero: Hero): Observable<Hero> {
+  addHero(hero: Hero): Observable<Hero> {
     return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
       .pipe(
         catchError(this.handleError('addHero', hero))
@@ -70,7 +70,7 @@ export class HeroesService {
 
   // #docregion deleteHero
   /** DELETE: delete the hero from the server */
-  deleteHero (id: number): Observable<{}> {
+  deleteHero(id: number): Observable<{}> {
     const url = `${this.heroesUrl}/${id}`; // DELETE api/heroes/42
     return this.http.delete(url, httpOptions)
       .pipe(
@@ -81,7 +81,7 @@ export class HeroesService {
 
   // #docregion updateHero
   /** PUT: update the hero on the server. Returns the updated hero upon success. */
-  updateHero (hero: Hero): Observable<Hero> {
+  updateHero(hero: Hero): Observable<Hero> {
     // #enddocregion updateHero
     // #docregion update-headers
     httpOptions.headers =

aio/content/examples/http/src/app/http-error-handler.service.ts

@@ -15,8 +15,10 @@ export class HttpErrorHandler {
   constructor(private messageService: MessageService) { }
 
   /** Create curried handleError function that already knows the service name */
-  createHandleError = (serviceName = '') => <T>
-    (operation = 'operation', result = {} as T) => this.handleError(serviceName, operation, result);
+  createHandleError = (serviceName = '') => {
+    return <T>(operation = 'operation', result = {} as T) =>
+      this.handleError(serviceName, operation, result);
+  }
 
   /**
    * Returns a function that handles Http operation failures.
@@ -25,7 +27,7 @@ export class HttpErrorHandler {
    * @param operation - name of the operation that failed
    * @param result - optional value to return as the observable result
    */
-  handleError<T> (serviceName = '', operation = 'operation', result = {} as T) {
+  handleError<T>(serviceName = '', operation = 'operation', result = {} as T) {
 
     return (error: HttpErrorResponse): Observable<T> => {
       // TODO: send the error to remote logging infrastructure

aio/content/examples/http/src/app/package-search/package-search.service.ts

@@ -39,7 +39,7 @@ export class PackageSearchService {
     this.handleError = httpErrorHandler.createHandleError('HeroesService');
   }
 
-  search (packageName: string, refresh = false): Observable<NpmPackageInfo[]> {
+  search(packageName: string, refresh = false): Observable<NpmPackageInfo[]> {
     // clear if no pkg name
     if (!packageName.trim()) { return of([]); }
 

aio/content/examples/http/src/app/request-cache.service.ts

@@ -12,7 +12,7 @@ export interface RequestCacheEntry {
 // #docregion request-cache
 export abstract class RequestCache {
   abstract get(req: HttpRequest<any>): HttpResponse<any> | undefined;
-  abstract put(req: HttpRequest<any>, response: HttpResponse<any>): void
+  abstract put(req: HttpRequest<any>, response: HttpResponse<any>): void;
 }
 // #enddocregion request-cache
 
@@ -44,8 +44,8 @@ export class RequestCacheWithMap implements RequestCache {
     const url = req.urlWithParams;
     this.messenger.add(`Caching response from "${url}".`);
 
-    const entry = { url, response, lastRead: Date.now() };
-    this.cache.set(url, entry);
+    const newEntry = { url, response, lastRead: Date.now() };
+    this.cache.set(url, newEntry);
 
     // remove expired cache entries
     const expired = Date.now() - maxAge;

aio/content/examples/http/src/main-specs.ts

@@ -22,13 +22,13 @@ import './testing/http-client.spec.ts';
 bootstrap();
 
 //
-function bootstrap () {
-  if (window['jasmineRef']) {
+function bootstrap() {
+  if ((window as any).jasmineRef) {
     location.reload();
     return;
   } else {
     window.onload(undefined);
-    window['jasmineRef'] = jasmine.getEnv();
+    (window as any).jasmineRef = jasmine.getEnv();
   }
 
   // First, initialize the Angular testing environment.

aio/content/examples/http/src/testing/global-jasmine.ts

@@ -1,3 +1,3 @@
 import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';
 
-window['jasmineRequire'] = jasmineRequire;
+(window as any).jasmineRequire = jasmineRequire;

aio/content/examples/http/src/testing/http-client.spec.ts

@@ -73,7 +73,7 @@ describe('HttpClient testing', () => {
 
     // Make an HTTP GET request with specific header
     httpClient.get<Data>(testUrl, {
-        headers: new HttpHeaders({'Authorization': 'my-auth-token'})
+        headers: new HttpHeaders({Authorization: 'my-auth-token'})
       })
       .subscribe(data =>
         expect(data).toEqual(testData)
@@ -83,14 +83,14 @@ describe('HttpClient testing', () => {
     // #docregion predicate
     // Expect one request with an authorization header
     const req = httpTestingController.expectOne(
-      req => req.headers.has('Authorization')
+      request => request.headers.has('Authorization')
     );
     // #enddocregion predicate
     req.flush(testData);
   });
 
   it('can test multiple requests', () => {
-    let testData: Data[] = [
+    const testData: Data[] = [
       { name: 'bob' }, { name: 'carol' },
       { name: 'ted' }, { name: 'alice' }
     ];

aio/content/examples/i18n/e2e/src/app.e2e-spec.ts

@@ -2,35 +2,35 @@ import { browser, element, by } from 'protractor';
 
 describe('i18n E2E Tests', () => {
 
-  beforeEach(function () {
+  beforeEach(() => {
     browser.get('');
   });
 
-  it('should display i18n translated welcome: Bonjour !', function () {
+  it('should display i18n translated welcome: Bonjour !', () => {
     expect(element(by.css('h1')).getText()).toEqual('Bonjour i18n !');
   });
 
-  it('should display the node texts without elements', function () {
+  it('should display the node texts without elements', () => {
     expect(element(by.css('app-root')).getText()).toContain(`Je n'affiche aucun élément`);
   });
 
-  it('should display the translated title attribute', function () {
+  it('should display the translated title attribute', () => {
     const title = element(by.css('img')).getAttribute('title');
     expect(title).toBe(`Logo d'Angular`);
   });
 
-  it('should display the ICU plural expression', function () {
+  it('should display the ICU plural expression', () => {
     expect(element.all(by.css('span')).get(0).getText()).toBe(`Mis à jour à l'instant`);
   });
 
-  it('should display the ICU select expression', function () {
+  it('should display the ICU select expression', () => {
     const selectIcuExp = element.all(by.css('span')).get(1);
     expect(selectIcuExp.getText()).toBe(`L'auteur est une femme`);
     element.all(by.css('button')).get(2).click();
     expect(selectIcuExp.getText()).toBe(`L'auteur est un homme`);
   });
 
-  it('should display the nested expression', function() {
+  it('should display the nested expression', () => {
     const nestedExp = element.all(by.css('span')).get(2);
     const incBtn = element.all(by.css('button')).get(0);
     expect(nestedExp.getText()).toBe(`Mis à jour: à l'instant`);

aio/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts

@@ -1,14 +1,10 @@
-'use strict';
-
 import { browser, element, by } from 'protractor';
 import { logging } from 'selenium-webdriver';
 
-describe('Inputs and Outputs', function () {
+describe('Inputs and Outputs', () => {
 
 
-  beforeEach(() => {
-    browser.get('');
-  });
+  beforeEach(() => browser.get(''));
 
 
    // helper function used to test what's logged to the console
@@ -17,51 +13,48 @@ describe('Inputs and Outputs', function () {
       .manage()
       .logs()
       .get(logging.Type.BROWSER);
-    const message = logs.filter(({ message }) =>
-      message.indexOf(contents) !== -1 ? true : false
-    );
-    console.log(message);
-    expect(message.length).toBeGreaterThan(0);
+    const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1);
+    expect(messages.length).toBeGreaterThan(0);
   }
 
-  it('should have title Inputs and Outputs', function () {
-    let title = element.all(by.css('h1')).get(0);
+  it('should have title Inputs and Outputs', () => {
+    const title = element.all(by.css('h1')).get(0);
     expect(title.getText()).toEqual('Inputs and Outputs');
   });
 
   it('should add 123 to the parent list', async () => {
-    let addToParentButton = element.all(by.css('button')).get(0);
-    let addToListInput = element.all(by.css('input')).get(0);
-    let addedItem = element.all(by.css('li')).get(4);
+    const addToParentButton = element.all(by.css('button')).get(0);
+    const addToListInput = element.all(by.css('input')).get(0);
+    const addedItem = element.all(by.css('li')).get(4);
     await addToListInput.sendKeys('123');
     await addToParentButton.click();
     expect(addedItem.getText()).toEqual('123');
   });
 
   it('should delete item', async () => {
-    let deleteButton = element.all(by.css('button')).get(1);
+    const deleteButton = element.all(by.css('button')).get(1);
     const contents = 'Child';
     await deleteButton.click();
     await logChecker(deleteButton, contents);
   });
 
   it('should log buy the item', async () => {
-    let buyButton = element.all(by.css('button')).get(2);
+    const buyButton = element.all(by.css('button')).get(2);
     const contents = 'Child';
     await buyButton.click();
     await logChecker(buyButton, contents);
   });
 
   it('should save item for later', async () => {
-    let saveButton = element.all(by.css('button')).get(3);
+    const saveButton = element.all(by.css('button')).get(3);
     const contents = 'Child';
     await saveButton.click();
     await logChecker(saveButton, contents);
   });
 
   it('should add item to wishlist', async () => {
-    let addToParentButton = element.all(by.css('button')).get(4);
-    let addedItem = element.all(by.css('li')).get(6);
+    const addToParentButton = element.all(by.css('button')).get(4);
+    const addedItem = element.all(by.css('li')).get(6);
     await addToParentButton.click();
     expect(addedItem.getText()).toEqual('Television');
   });

aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts

@@ -1,9 +1,4 @@
-/* tslint:disable:use-input-property-decorator */
-/* tslint:disable:use-output-property-decorator */
-
-/* tslint:disable:no-input-rename */
-
-
+// tslint:disable: no-input-rename no-output-rename use-input-property-decorator use-output-property-decorator
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({

aio/content/examples/interpolation/e2e/src/app.e2e-spec.ts

@@ -2,33 +2,33 @@ import { browser, element, by } from 'protractor';
 
 describe('Interpolation e2e tests', () => {
 
-  beforeEach(function () {
+  beforeEach(() => {
     browser.get('');
   });
 
-  it('should display Interpolation and Template Expressions', function () {
+  it('should display Interpolation and Template Expressions', () => {
     expect(element(by.css('h1')).getText()).toEqual('Interpolation and Template Expressions');
   });
 
-  it('should display Current customer: Maria', function () {
+  it('should display Current customer: Maria', () => {
     expect(element.all(by.css('h3')).get(0).getText()).toBe(`Current customer: Maria`);
   });
 
-  it('should display The sum of 1 + 1 is not 4.', function () {
+  it('should display The sum of 1 + 1 is not 4.', () => {
     expect(element.all(by.css('p:last-child')).get(0).getText()).toBe(`The sum of 1 + 1 is not 4.`);
   });
 
-  it('should display Expression Context', function () {
+  it('should display Expression Context', () => {
     expect(element.all(by.css('h2')).get(1).getText()).toBe(`Expression Context`);
   });
 
-  it('should display a list of customers', function () {
+  it('should display a list of customers', () => {
     expect(element.all(by.css('li')).get(0).getText()).toBe(`Maria`);
   });
 
-  it('should display two pictures', function() {
-    let pottedPlant = element.all(by.css('img')).get(0);
-    let lamp = element.all(by.css('img')).get(1);
+  it('should display two pictures', () => {
+    const pottedPlant = element.all(by.css('img')).get(0);
+    const lamp = element.all(by.css('img')).get(1);
 
     expect(pottedPlant.getAttribute('src')).toContain('potted-plant');
     expect(pottedPlant.isDisplayed()).toBe(true);
@@ -37,9 +37,9 @@ describe('Interpolation e2e tests', () => {
     expect(lamp.isDisplayed()).toBe(true);
   });
 
-  it('should support user input', function () {
-    let input = element(by.css('input'));
-    let label = element(by.css('label'));
+  it('should support user input', () => {
+    const input = element(by.css('input'));
+    const label = element(by.css('label'));
     expect(label.getText()).toEqual('Type something:');
     input.sendKeys('abc');
     expect(label.getText()).toEqual('Type something: abc');

aio/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts

@@ -18,25 +18,25 @@ describe('providers App', () => {
     expect(page.getTitleText()).toEqual('Lazy loading feature modules');
   });
 
-  describe('Customers', function() {
-    beforeEach(function() {
+  describe('Customers', () => {
+    beforeEach(() => {
       customersButton.click();
     });
 
-    it('should show customers when the button is clicked', function() {
-        let customersMessage = element(by.css('app-customers > p'));
+    it('should show customers when the button is clicked', () => {
+        const customersMessage = element(by.css('app-customers > p'));
         expect(customersMessage.getText()).toBe('customers works!');
     });
 
   });
 
-  describe('Orders', function() {
-    beforeEach(function() {
+  describe('Orders', () => {
+    beforeEach(() => {
       ordersButton.click();
     });
 
-    it('should show orders when the button is clicked', function() {
-        let ordersMessage = element(by.css('app-orders > p'));
+    it('should show orders when the button is clicked', () => {
+        const ordersMessage = element(by.css('app-orders > p'));
         expect(ordersMessage.getText()).toBe('orders works!');
     });
 

aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,3 @@
-'use strict'; // necessary for es6 output in node
-
 import { browser, element, ElementFinder, by } from 'protractor';
 
 describe('Lifecycle hooks', () => {
@@ -15,11 +13,11 @@ describe('Lifecycle hooks', () => {
   });
 
   it('should support peek-a-boo', async () => {
-    let pabComp = element(by.css('peek-a-boo-parent peek-a-boo'));
+    const pabComp = element(by.css('peek-a-boo-parent peek-a-boo'));
     expect(pabComp.isPresent()).toBe(false, 'should not be able to find the "peek-a-boo" component');
 
-    let pabButton = element.all(by.css('peek-a-boo-parent button')).get(0);
-    let updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1);
+    const pabButton = element.all(by.css('peek-a-boo-parent button')).get(0);
+    const updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1);
     expect(pabButton.getText()).toContain('Create Peek');
 
     await pabButton.click();
@@ -37,12 +35,12 @@ describe('Lifecycle hooks', () => {
   });
 
   it('should support OnChanges hook', () => {
-    let onChangesViewEle = element.all(by.css('on-changes div')).get(0);
-    let inputEles = element.all(by.css('on-changes-parent input'));
-    let heroNameInputEle = inputEles.get(1);
-    let powerInputEle = inputEles.get(0);
-    let titleEle = onChangesViewEle.element(by.css('p'));
-    let changeLogEles = onChangesViewEle.all(by.css('div'));
+    const onChangesViewEle = element.all(by.css('on-changes div')).get(0);
+    const inputEles = element.all(by.css('on-changes-parent input'));
+    const heroNameInputEle = inputEles.get(1);
+    const powerInputEle = inputEles.get(0);
+    const titleEle = onChangesViewEle.element(by.css('p'));
+    const changeLogEles = onChangesViewEle.all(by.css('div'));
 
     expect(titleEle.getText()).toContain('Windstorm can sing');
     expect(changeLogEles.count()).toEqual(2, 'should start with 2 messages');
@@ -56,12 +54,12 @@ describe('Lifecycle hooks', () => {
   });
 
   it('should support DoCheck hook', async () => {
-    let doCheckViewEle = element.all(by.css('do-check div')).get(0);
-    let inputEles = element.all(by.css('do-check-parent input'));
-    let heroNameInputEle = inputEles.get(1);
-    let powerInputEle = inputEles.get(0);
-    let titleEle = doCheckViewEle.element(by.css('p'));
-    let changeLogEles = doCheckViewEle.all(by.css('div'));
+    const doCheckViewEle = element.all(by.css('do-check div')).get(0);
+    const inputEles = element.all(by.css('do-check-parent input'));
+    const heroNameInputEle = inputEles.get(1);
+    const powerInputEle = inputEles.get(0);
+    const titleEle = doCheckViewEle.element(by.css('p'));
+    const changeLogEles = doCheckViewEle.all(by.css('div'));
     let logCount: number;
 
     expect(titleEle.getText()).toContain('Windstorm can sing');
@@ -84,11 +82,11 @@ describe('Lifecycle hooks', () => {
   });
 
   it('should support AfterView hooks', async () => {
-    let parentEle = element(by.tagName('after-view-parent'));
-    let buttonEle = parentEle.element(by.tagName('button')); // Reset
-    let commentEle = parentEle.element(by.className('comment'));
-    let logEles = parentEle.all(by.css('h4 ~ div'));
-    let childViewInputEle = parentEle.element(by.css('app-child-view input'));
+    const parentEle = element(by.tagName('after-view-parent'));
+    const buttonEle = parentEle.element(by.tagName('button')); // Reset
+    const commentEle = parentEle.element(by.className('comment'));
+    const logEles = parentEle.all(by.css('h4 ~ div'));
+    const childViewInputEle = parentEle.element(by.css('app-child-view input'));
     let logCount: number;
 
     expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
@@ -101,7 +99,7 @@ describe('Lifecycle hooks', () => {
     expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
     expect(commentEle.getText()).toContain('long name');
 
-    let count = await logEles.count();
+    const count = await logEles.count();
     expect(logCount + 7).toBeGreaterThan(count - 3, '7 additional log messages should have been added');
     expect(logCount + 7).toBeLessThan(count + 3, '7 additional log messages should have been added');
 
@@ -111,18 +109,18 @@ describe('Lifecycle hooks', () => {
   });
 
   it('should support AfterContent hooks', async () => {
-    let parentEle = element(by.tagName('after-content-parent'));
-    let buttonEle = parentEle.element(by.tagName('button')); // Reset
-    let commentEle = parentEle.element(by.className('comment'));
-    let logEles = parentEle.all(by.css('h4 ~ div'));
-    let childViewInputEle = parentEle.element(by.css('app-child input'));
+    const parentEle = element(by.tagName('after-content-parent'));
+    const buttonEle = parentEle.element(by.tagName('button')); // Reset
+    const commentEle = parentEle.element(by.className('comment'));
+    const logEles = parentEle.all(by.css('h4 ~ div'));
+    const childViewInputEle = parentEle.element(by.css('app-child input'));
     let logCount = await logEles.count();
 
     expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
     expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
 
     await sendKeys(childViewInputEle, '-test-');
-    let count = await logEles.count();
+    const count = await logEles.count();
     expect(childViewInputEle.getAttribute('value')).toContain('-test-');
     expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
     expect(commentEle.getText()).toContain('long name');
@@ -134,11 +132,11 @@ describe('Lifecycle hooks', () => {
   });
 
   it('should support spy\'s OnInit & OnDestroy hooks', async () => {
-    let inputEle = element(by.css('spy-parent input'));
-    let addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero'));
-    let resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes'));
-    let heroEles = element.all(by.css('spy-parent div[mySpy'));
-    let logEles = element.all(by.css('spy-parent h4 ~ div'));
+    const inputEle = element(by.css('spy-parent input'));
+    const addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero'));
+    const resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes'));
+    const heroEles = element.all(by.css('spy-parent div[appSpy'));
+    const logEles = element.all(by.css('spy-parent h4 ~ div'));
 
     expect(heroEles.count()).toBe(2, 'should have two heroes displayed');
     expect(logEles.count()).toBe(2, 'should have two log entries');
@@ -155,10 +153,10 @@ describe('Lifecycle hooks', () => {
   });
 
   it('should support "spy counter"', async () => {
-    let updateCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Update'));
-    let resetCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Reset'));
-    let textEle = element(by.css('counter-parent app-counter > div'));
-    let logEles = element.all(by.css('counter-parent h4 ~ div'));
+    const updateCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Update'));
+    const resetCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Reset'));
+    const textEle = element(by.css('counter-parent app-counter > div'));
+    const logEles = element.all(by.css('counter-parent h4 ~ div'));
 
     expect(textEle.getText()).toContain('Counter = 0');
     expect(logEles.count()).toBe(2, 'should start with two log entries');

aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts

@@ -67,8 +67,8 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI
   }
 
   private logIt(method: string) {
-    let child = this.contentChild;
-    let message = `${method}: ${child ? child.hero : 'no'} child content`;
+    const child = this.contentChild;
+    const message = `${method}: ${child ? child.hero : 'no'} child content`;
     this.logger.log(message);
   }
 // #docregion hooks

aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts

@@ -32,17 +32,20 @@ export class ChildViewComponent {
 })
 // #docregion hooks
 export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
+  // #enddocregion hooks
+  comment = '';
+  // #docregion hooks
   private prevHero = '';
 
   // Query for a VIEW child of type `ChildViewComponent`
   @ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
 
-// #enddocregion hooks
+  // #enddocregion hooks
   constructor(private logger: LoggerService) {
     this.logIt('AfterView constructor');
   }
 
-// #docregion hooks
+  // #docregion hooks
   ngAfterViewInit() {
     // viewChild is set after the view has been initialized
     this.logIt('AfterViewInit');
@@ -59,27 +62,25 @@ export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
       this.doSomething();
     }
   }
-// #enddocregion hooks
+  // #enddocregion hooks
 
-  comment = '';
-
-// #docregion do-something
+  // #docregion do-something
   // This surrogate for real business logic sets the `comment`
   private doSomething() {
-    let c = this.viewChild.hero.length > 10 ? `That's a long name` : '';
+    const c = this.viewChild.hero.length > 10 ? `That's a long name` : '';
     if (c !== this.comment) {
       // Wait a tick because the component's view has already been checked
       this.logger.tick_then(() => this.comment = c);
     }
   }
-// #enddocregion do-something
+  // #enddocregion do-something
 
   private logIt(method: string) {
-    let child = this.viewChild;
-    let message = `${method}: ${child ? child.hero : 'no'} child view`;
+    const child = this.viewChild;
+    const message = `${method}: ${child ? child.hero : 'no'} child view`;
     this.logger.log(message);
   }
-// #docregion hooks
+  // #docregion hooks
   // ...
 }
 // #enddocregion hooks

aio/content/examples/lifecycle-hooks/src/app/counter.component.ts

@@ -13,7 +13,7 @@ import { LoggerService }  from './logger.service';
     Counter = {{counter}}
 
     <h5>-- Counter Change Log --</h5>
-    <div *ngFor="let chg of changeLog" mySpy>{{chg}}</div>
+    <div *ngFor="let chg of changeLog" appSpy>{{chg}}</div>
   </div>
   `,
   styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}']
@@ -31,9 +31,9 @@ export class MyCounterComponent implements OnChanges {
     }
 
     // A change to `counter` is the only change we care about
-    let chng = changes['counter'];
-    let cur = chng.currentValue;
-    let prev = JSON.stringify(chng.previousValue); // first time is {}; after is integer
+    const chng = changes.counter;
+    const cur = chng.currentValue;
+    const prev = JSON.stringify(chng.previousValue); // first time is {}; after is integer
     this.changeLog.push(`counter: currentValue = ${cur}, previousValue = ${prev}`);
   }
 }