release: cut the v10.0.12 release

In chapter internationalization (i18n) at section "Deploy multiple locales" the syntax for angular.json is wrong.
This commit fixes the angular.json, when specifying the translation file and the baseHref for a locale.

PR Close #38553

.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_5: &components_repo_unit_tests_cache_key v9-angular-components-09e68db8ed5b1253f2fe38ff954ef0df019fc25a
-var_6: &components_repo_unit_tests_cache_key_fallback v7-angular-components-
+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

@@ -505,8 +505,8 @@ groups:
       - >
         contains_any_globs(files, [
           'packages/core/src/i18n/**',
-          'packages/core/src/render3/i18n.ts',
+          'packages/core/src/render3/i18n/**',
-          'packages/core/src/render3/i18n.md',
+          'packages/core/src/render3/instructions/i18n.ts',
           'packages/core/src/render3/interfaces/i18n.ts',
           'packages/common/locales/**',
           'packages/common/src/i18n/**',
@@ -863,6 +863,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,79 @@
+<a name="10.0.12"></a>
+## 10.0.12 (2020-08-24)
+
+
+### Bug Fixes
+
+* **compiler-cli:** adding references to const enums in runtime code ([#38542](https://github.com/angular/angular/issues/38542)) ([814b436](https://github.com/angular/angular/commit/814b436)), closes [#38513](https://github.com/angular/angular/issues/38513)
+* **core:** remove closing body tag from inert DOM builder ([#38454](https://github.com/angular/angular/issues/38454)) ([5528536](https://github.com/angular/angular/commit/5528536))
+* **localize:** include the last placeholder in parsed translation text ([#38452](https://github.com/angular/angular/issues/38452)) ([57d1a48](https://github.com/angular/angular/commit/57d1a48))
+* **localize:** parse all parts of a translation with nested HTML ([#38452](https://github.com/angular/angular/issues/38452)) ([07b99f5](https://github.com/angular/angular/commit/07b99f5)), closes [#38422](https://github.com/angular/angular/issues/38422)
+
+
+### Features
+
+* **language-service:** introduce hybrid visitor to locate AST node ([#38540](https://github.com/angular/angular/issues/38540)) ([66d8c22](https://github.com/angular/angular/commit/66d8c22))
+
+
+
+<a name="10.0.11"></a>
+## 10.0.11 (2020-08-19)
+
+
+### Bug Fixes
+
+* **router:** ensure routerLinkActive updates when associated routerLinks change (resubmit of [#38349](https://github.com/angular/angular/issues/38349)) ([#38511](https://github.com/angular/angular/issues/38511)) ([0af9533](https://github.com/angular/angular/commit/0af9533)), closes [#18469](https://github.com/angular/angular/issues/18469)
+
+
+
+<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.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.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)
 

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();
+    const movieRows = getMovieRows();
-    for (let i = 0; i < expectedSamples.length; i++) {
+    for (const sample of expectedSamples) {
-      let sample = expectedSamples[i];
+      const tableCell = movieRows.get(sample.row)
-      let 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'));
+    const movieListComp = element(by.tagName('app-movie-list'));
-    let heroInput = movieListComp.element(by.tagName('input'));
+    const heroInput = movieListComp.element(by.tagName('input'));
-    let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
+    const favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
-    let resultLabel = movieListComp.element(by.css('span > p'));
+    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() {
+  get heroes() { return this._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
-// #docregion state1, events1
       // ...
 // #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, trigger, component
-// #enddocregion transition2
 // #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 () {
+  it('has no hero details initially', () => {
-    let page = getPageElts();
+    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();
+    const page = getPageElts();
-    let hero = await heroFromDetail(page.heroDetail);
+    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();
+    const page = getPageElts();
-    let hero = await heroFromDetail(page.heroDetail);
+    const hero = await heroFromDetail(page.heroDetail);
-    let newName = targetHero.name + nameSuffix;
+    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 () {
+  it('has no sales tax initially', () => {
-    let page = getPageElts();
+    const page = getPageElts();
     expect(page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info');
   });
 
-  it('shows sales tax', async function () {
+  it('shows sales tax', async () => {
-    let page = getPageElts();
+    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();
+  const id = await detail.all(by.css('div')).first().getText();
-  let _id = await detail.all(by.css('div')).first().getText();
   // Get name from the h2
-  // let _name = await detail.element(by.css('h4')).getText();
+  const name = await detail.element(by.css('h4')).getText();
-  let _name = await detail.element(by.css('h4')).getText();
   return {
-    id: +_id.substr(_id.indexOf(' ') + 1),
+    id: +id.substr(id.indexOf(' ') + 1),
-    name: _name.substr(0, _name.lastIndexOf(' '))
+    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}`, () => {
+  it(`should display correct title: ${title}`, () => {
-    expect(element(by.css('h1')).getText()).toEqual(_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 () {
+  beforeEach(() => browser.get(''));
-    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);
+    const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
-      expect(message.length).toBeGreaterThan(0);
+    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);
+    const DOMPropertyButton = element.all(by.css('button')).get(2);
-    let input = element(by.css('input'));
+    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 () {
+  it('should have title Built-in Directives', () => {
-    let title = element.all(by.css('h1')).get(0);
+    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);
+    const firstLabel = element.all(by.css('p')).get(0);
-    let firstInput = element.all(by.css('input')).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 () {
+  it('should modify sentence when modified checkbox checked', () => {
-    let modifiedChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(1);
+    const modifiedChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(1);
-    let modifiedSentence = element.all(by.css('div')).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 () {
+  it('should modify sentence when normal checkbox checked', () => {
-    let normalChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(4);
+    const normalChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(4);
-    let normalSentence = element.all(by.css('div')).get(7);
+    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 () {
+  it('should toggle app-item-detail', () => {
-    let toggleButton = element.all(by.css('button')).get(3);
+    const toggleButton = element.all(by.css('button')).get(3);
-    let toggledDiv = element.all(by.css('app-item-detail')).get(0);
+    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 () {
+  it('should hide app-item-detail', () => {
-    let hiddenMessage = element.all(by.css('p')).get(11);
+    const hiddenMessage = element.all(by.css('p')).get(11);
-    let hiddenDiv = element.all(by.css('app-item-detail')).get(2);
+    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 () {
+  it('should have 10 lists each containing the string Teapot', () => {
-    let listDiv = element.all(by.cssContainingText('.box', 'Teapot'));
+    const listDiv = element.all(by.cssContainingText('.box', 'Teapot'));
     expect(listDiv.count()).toBe(10);
   });
 
-  it('should switch case', function () {
+  it('should switch case', () => {
-    let tvRadioButton = element.all(by.css('input[type="radio"]')).get(3);
+    const tvRadioButton = element.all(by.css('input[type="radio"]')).get(3);
-    let tvDiv = element(by.css('app-lost-item'));
+    const tvDiv = element(by.css('app-lost-item'));
 
-    let fishbowlRadioButton = element.all(by.css('input[type="radio"]')).get(4);
+    const fishbowlRadioButton = element.all(by.css('input[type="radio"]')).get(4);
-    let fishbowlDiv = element(by.css('app-unknown-item'));
+    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
+  // #docregion setClasses
-  currentClasses: {};
   setCurrentClasses() {
     // CSS classes: added/removed per current state of component properties
     this.currentClasses =  {
-      'saveable': this.canSave,
+      saveable: this.canSave,
-      'modified': !this.isUnchanged,
+      modified: !this.isUnchanged,
-      'special':  this.isSpecial
+      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);
+    this.nullCustomer = 'Kelly';
-  }
-
-  resetNullItem() {
-    this.nullCustomer = null;
   }
 
   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 () {
+describe('Built Template Functions Example', () => {
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should have title Built-in Template Functions', function () {
+  it('should have title Built-in Template Functions', () => {
-    let title = element.all(by.css('h1')).get(0);
+    const title = element.all(by.css('h1')).get(0);
     expect(title.getText()).toEqual('Built-in Template Functions');
   });
 
-  it('should display $any( ) in h2', function () {
+  it('should display $any( ) in h2', () => {
-    let header = element(by.css('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'];
+    const heroNames = ['Dr IQ', 'Magneta', 'Bombasto'];
-    let _masterName = 'Master';
+    const masterName = 'Master';
 
-    it('should pass properties to children properly', function () {
+    it('should pass properties to children properly', () => {
-      let parent = element.all(by.tagName('app-hero-parent')).get(0);
+      const parent = element.all(by.tagName('app-hero-parent')).get(0);
-      let heroes = parent.all(by.tagName('app-hero-child'));
+      const heroes = parent.all(by.tagName('app-hero-child'));
 
-      for (let i = 0; i < _heroNames.length; i++) {
+      for (let i = 0; i < heroNames.length; i++) {
-        let childTitle = heroes.get(i).element(by.tagName('h3')).getText();
+        const childTitle = heroes.get(i).element(by.tagName('h3')).getText();
-        let childDetail = heroes.get(i).element(by.tagName('p')).getText();
+        const childDetail = heroes.get(i).element(by.tagName('p')).getText();
-        expect(childTitle).toEqual(_heroNames[i] + ' says:');
+        expect(childTitle).toEqual(heroNames[i] + ' says:');
-        expect(childDetail).toContain(_masterName);
+        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 () {
+    it('should display trimmed, non-empty names', () => {
-      let _nonEmptyNameIndex = 0;
+      const nonEmptyNameIndex = 0;
-      let _nonEmptyName = '"Dr IQ"';
+      const nonEmptyName = '"Dr IQ"';
-      let parent = element.all(by.tagName('app-name-parent')).get(0);
+      const parent = element.all(by.tagName('app-name-parent')).get(0);
-      let hero = parent.all(by.tagName('app-name-child')).get(_nonEmptyNameIndex);
+      const hero = parent.all(by.tagName('app-name-child')).get(nonEmptyNameIndex);
 
-      let displayName = hero.element(by.tagName('h3')).getText();
+      const displayName = hero.element(by.tagName('h3')).getText();
-      expect(displayName).toEqual(_nonEmptyName);
+      expect(displayName).toEqual(nonEmptyName);
     });
 
-    it('should replace empty name with default name', function () {
+    it('should replace empty name with default name', () => {
-      let _emptyNameIndex = 1;
+      const emptyNameIndex = 1;
-      let _defaultName = '"<no name set>"';
+      const defaultName = '"<no name set>"';
-      let parent = element.all(by.tagName('app-name-parent')).get(0);
+      const parent = element.all(by.tagName('app-name-parent')).get(0);
-      let hero = parent.all(by.tagName('app-name-child')).get(_emptyNameIndex);
+      const hero = parent.all(by.tagName('app-name-child')).get(emptyNameIndex);
 
-      let displayName = hero.element(by.tagName('h3')).getText();
+      const displayName = hero.element(by.tagName('h3')).getText();
-      expect(displayName).toEqual(_defaultName);
+      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 () {
+    it('should set expected initial values', () => {
-      let actual = getActual();
+      const actual = getActual();
 
-      let initialLabel = 'Version 1.23';
+      const initialLabel = 'Version 1.23';
-      let initialLog = 'Initial value of major set to 1, Initial value of minor set to 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 () {
+    it('should set expected values after clicking \'Minor\' twice', () => {
-      let repoTag = element(by.tagName('app-version-parent'));
+      const repoTag = element(by.tagName('app-version-parent'));
-      let newMinorButton = repoTag.all(by.tagName('button')).get(0);
+      const newMinorButton = repoTag.all(by.tagName('button')).get(0);
 
-      newMinorButton.click().then(function() {
+      newMinorButton.click().then(() => {
-        newMinorButton.click().then(function() {
+        newMinorButton.click().then(() => {
-          let actual = getActual();
+          const actual = getActual();
 
-          let labelAfter2Minor = 'Version 1.25';
+          const labelAfter2Minor = 'Version 1.25';
-          let logAfter2Minor = 'minor changed from 24 to 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 () {
+    it('should set expected values after clicking \'Major\' once', () => {
-      let repoTag = element(by.tagName('app-version-parent'));
+      const repoTag = element(by.tagName('app-version-parent'));
-      let newMajorButton = repoTag.all(by.tagName('button')).get(1);
+      const newMajorButton = repoTag.all(by.tagName('button')).get(1);
 
-      newMajorButton.click().then(function() {
+      newMajorButton.click().then(() => {
-        let actual = getActual();
+        const actual = getActual();
 
-        let labelAfterMajor = 'Version 2.0';
+        const labelAfterMajor = 'Version 2.0';
-        let logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 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'));
+      const versionTag = element(by.tagName('app-version-child'));
-      let label = versionTag.element(by.tagName('h3')).getText();
+      const label = versionTag.element(by.tagName('h3')).getText();
-      let ul = versionTag.element((by.tagName('ul')));
+      const ul = versionTag.element((by.tagName('ul')));
-      let logs = ul.all(by.tagName('li'));
+      const logs = ul.all(by.tagName('li'));
 
       return {
-        label: label,
+        label,
-        logs: logs,
+        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 () {
+    it('should not emit the event initially', () => {
-      let voteLabel = element(by.tagName('app-vote-taker'))
+      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 () {
+    it('should process Agree vote', () => {
-      let agreeButton1 = element.all(by.tagName('app-voter')).get(0)
+      const agreeButton1 = element.all(by.tagName('app-voter')).get(0)
         .all(by.tagName('button')).get(0);
-      agreeButton1.click().then(function() {
+      agreeButton1.click().then(() => {
-        let voteLabel = element(by.tagName('app-vote-taker'))
+        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 () {
+    it('should process Disagree vote', () => {
-      let agreeButton1 = element.all(by.tagName('app-voter')).get(1)
+      const agreeButton1 = element.all(by.tagName('app-voter')).get(1)
         .all(by.tagName('button')).get(1);
-      agreeButton1.click().then(function() {
+      agreeButton1.click().then(() => {
-        let voteLabel = element(by.tagName('app-vote-taker'))
+        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 () {
+    it('timer and parent seconds should match', () => {
-      let parent = element(by.tagName(parentTag));
+      const parent = element(by.tagName(parentTag));
-      let message = parent.element(by.tagName('app-countdown-timer')).getText();
+      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 () {
+    it('should stop the countdown', () => {
-      let parent = element(by.tagName(parentTag));
+      const parent = element(by.tagName(parentTag));
-      let stopButton = parent.all(by.tagName('button')).get(1);
+      const stopButton = parent.all(by.tagName('button')).get(1);
 
-      stopButton.click().then(function() {
+      stopButton.click().then(() => {
-        let message = parent.element(by.tagName('app-countdown-timer')).getText();
+        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 () {
+    it('should announce a mission', () => {
-      let missionControl = element(by.tagName('app-mission-control'));
+      const missionControl = element(by.tagName('app-mission-control'));
-      let announceButton = missionControl.all(by.tagName('button')).get(0);
+      const announceButton = missionControl.all(by.tagName('button')).get(0);
-      announceButton.click().then(function () {
+      announceButton.click().then(() => {
-        let history = missionControl.all(by.tagName('li'));
+        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';
+      const confirmedLog = ' confirmed the mission';
-      let missionControl = element(by.tagName('app-mission-control'));
+      const missionControl = element(by.tagName('app-mission-control'));
-      let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
+      const confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
-      confirmButton.click().then(function () {
+      confirmButton.click().then(() => {
-        let history = missionControl.all(by.tagName('li'));
+        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>';
   }
-
+  private _name = '';
-  get name(): string { return this._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[] = [];
+    const log: string[] = [];
-    for (let propName in changes) {
+    for (const propName in changes) {
-      let changedProp = changes[propName];
+      const changedProp = changes[propName];
-      let to = JSON.stringify(changedProp.currentValue);
+      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() {
+  it('scopes component styles to component view', () => {
-    let componentH1 = element(by.css('app-root > h1'));
+    const componentH1 = element(by.css('app-root > h1'));
-    let externalH1 = element(by.css('body > 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() {
+  it('allows styling :host element', () => {
-    let host = element(by.css('app-hero-details'));
+    const host = element(by.css('app-hero-details'));
 
     expect(host.getCssValue('borderWidth')).toEqual('1px');
   });
 
-  it('supports :host() in function form', function() {
+  it('supports :host() in function form', () => {
-    let host = element(by.css('app-hero-details'));
+    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() {
+  it('allows conditional :host-context() styling', () => {
-    let h2 = element(by.css('app-hero-details h2'));
+    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() {
+  it('styles both view and content children with /deep/', () => {
-    let viewH3 = element(by.css('app-hero-team h3'));
+    const viewH3 = element(by.css('app-hero-team h3'));
-    let contentH3 = element(by.css('app-hero-controls 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() {
+  it('includes styles loaded with CSS @import', () => {
-    let host = element(by.css('app-hero-details'));
+    const host = element(by.css('app-hero-details'));
 
     expect(host.getCssValue('padding')).toEqual('10px');
   });
 
-  it('processes template inline styles', function() {
+  it('processes template inline styles', () => {
-    let button = element(by.css('app-hero-controls button'));
+    const button = element(by.css('app-hero-controls button'));
-    let externalButton = element(by.css('body > 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() {
+  it('processes template <link>s', () => {
-    let li = element(by.css('app-hero-team li:first-child'));
+    const li = element(by.css('app-hero-team li:first-child'));
-    let externalLi = element(by.css('body > ul li'));
+    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 () {
+    it('should render Logged in User example', () => {
-      let loggedInUser = element.all(by.xpath('//h3[text()="Logged in user"]')).get(0);
+      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 () {
+    it('"Bombasto" should be the logged in user', () => {
-      let loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0);
+      const loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0);
       expect(loggedInUser).toBeDefined();
     });
 
-    it('should render sorted heroes', function () {
+    it('should render sorted heroes', () => {
-      let sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0);
+      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 () {
+    it('Dr Nice should be in sorted heroes', () => {
-      let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Dr Nice" and position()=2]')).get(0);
+      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 () {
+    it('RubberMan should be in sorted heroes', () => {
-      let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0);
+      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 () {
+    it('Magma should be in sorted heroes', () => {
-      let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Magma"]')).get(0);
+      const sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Magma"]')).get(0);
       expect(sortedHero).toBeDefined();
     });
 
-    it('should render Hero of the Month', function () {
+    it('should render Hero of the Month', () => {
-      let heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
+      const heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
       expect(heroOfTheMonth).toBeDefined();
     });
 
-    it('should render Hero Bios', function () {
+    it('should render Hero Bios', () => {
-      let heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
+      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 () {
+    it('should render Magma\'s description in Hero Bios', () => {
-      let magmaText =  element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0);
+      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 () {
+    it('should render Magma\'s phone in Hero Bios and Contacts', () => {
-      let magmaPhone =  element.all(by.xpath('//div[text()="Phone #: 555-555-5555"]')).get(0);
+      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 () {
+    it('should render Hero-of-the-Month runner-ups', () => {
-      let runnersUp =  element(by.id('rups1')).getText();
+      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 () {
+    it('should render DateLogger log entry in Hero-of-the-Month', () => {
-      let logs =  element.all(by.id('logs')).get(0).getText();
+      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 () {
+    it('should highlight Hero Bios and Contacts container when mouseover', () => {
-      let target = element(by.css('div[appHighlight="yellow"]'));
+      const target = element(by.css('div[appHighlight="yellow"]'));
-      let yellow = 'rgba(255, 255, 0, 1)';
+      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 () {
+    describe('in Parent Finder', () => {
-      let cathy1 = element(by.css('alex cathy'));
+      const cathy1 = element(by.css('alex cathy'));
-      let craig1 = element(by.css('alex craig'));
+      const craig1 = element(by.css('alex craig'));
-      let carol1 = element(by.css('alex carol p'));
+      const carol1 = element(by.css('alex carol p'));
-      let carol2 = element(by.css('barry 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,
+    componentListA,
-    b_components,
+    componentListB,
-    c_components,
+    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: component-selector space-before-function-paren
-/* tslint:disable:*/
 // #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
+// #enddocregion provide-the-parent
-// #docregion provide-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() {
+  describe('Other Injections:', () => {
-    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('#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() {
+  describe('User/Heroes:', () => {
-    it('User is Bob - unauthorized', function () {
+    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 () {
+    it('unauthorized user should have multiple unauthorized heroes', () => {
-      let heroes = element.all(by.css('#unauthorized app-hero-list div'));
+      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 () {
+    it('unauthorized user should have no secret heroes', () => {
-      let heroes = element.all(by.css('#unauthorized app-hero-list div'));
+      const heroes = element.all(by.css('#unauthorized app-hero-list div'));
       expect(heroes.count()).toBeGreaterThan(0);
 
-      let filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
+      const filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
-        return elem.getText().then((text: string) => {
+        return elem.getText().then((text: string) => /secret/.test(text));
-          return /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) {
+      beforeAll((done: any) => {
-        let buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0);
+        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 () {
+      it('authorized user should have multiple authorized heroes ', () => {
-        let heroes = element.all(by.css('#authorized app-hero-list div'));
+        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 () {
+      it('authorized user should have multiple authorized heroes with tree-shakeable HeroesService', () => {
-        let heroes = element.all(by.css('#tspAuthorized app-hero-list div'));
+        const heroes = element.all(by.css('#tspAuthorized app-hero-list div'));
         expect(heroes.count()).toBeGreaterThan(0);
       });
 
-      it('authorized user should have secret heroes', function () {
+      it('authorized user should have secret heroes', () => {
-        let heroes = element.all(by.css('#authorized app-hero-list div'));
+        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) {
+        const filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
-         return elem.getText().then(function(text: string) {
+         return elem.getText().then((text: string) => /secret/.test(text));
-            return /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;
+  const bigCylinders = 12;
-  let car = new Car(new Engine2(bigCylinders), new Tires());
+  const car = new Car(new Engine2(bigCylinders), new Tires());
-// #enddocregion car-ctor-instantiation-with-param
+  // #enddocregion car-ctor-instantiation-with-param
   car.description = 'Super';
   return car;
 }
 
 /////////// example 3 //////////
-  // #docregion car-ctor-instantiation-with-mocks
+// #docregion car-ctor-instantiation-with-mocks
-  class MockEngine extends Engine { cylinders = 8; }
+class MockEngine extends Engine { cylinders = 8; }
-  class MockTires  extends Tires  { make = 'YokoGoodStone'; }
+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);
+const alice = new User('Alice', true);
-let bob = new User('Bob', false);
+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 () {
+describe('Displaying Data Tests', () => {
-  let _title = 'Tour of Heroes';
+  const title = 'Tour of Heroes';
-  let _defaultHero = 'Windstorm';
+  const defaultHero = 'Windstorm';
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should display correct title: ' + _title, function () {
+  it('should display correct title: ' + title, () => {
-    expect(element(by.css('h1')).getText()).toEqual(_title);
+    expect(element(by.css('h1')).getText()).toEqual(title);
   });
 
-  it('should have correct default hero:  ' + _defaultHero, function () {
+  it('should have correct default hero:  ' + defaultHero, () => {
-    expect(element(by.css('h2')).getText()).toContain(_defaultHero);
+    expect(element(by.css('h2')).getText()).toContain(defaultHero);
   });
 
- it('should have heroes', function () {
+  it('should have heroes', () => {
-    let heroEls = element.all(by.css('li'));
+    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 () {
+describe('Docs Style Guide', () => {
-  let _title = 'Authors Style Guide Sample';
+  const title = 'Authors Style Guide Sample';
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should display correct title: ' + _title, function () {
+  it('should display correct title: ' + title, () => {
-    expect(element(by.css('h1')).getText()).toEqual(_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 () {
+  it('should load ad banner', () => {
-    let headline = element(by.xpath("//h4[text()='Featured Hero Profile']"));
+    const headline = element(by.xpath("//h4[text()='Featured Hero Profile']"));
-    let name = element(by.xpath("//h3[text()='Bombasto']"));
+    const name = element(by.xpath("//h3[text()='Bombasto']"));
-    let bio = element(by.xpath("//p[text()='Brave as they come']"));
+    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);
+    const componentRef = viewContainerRef.createComponent<AdComponent>(componentFactory);
-    (<AdComponent>componentRef.instance).data = adItem.data;
+    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 () {
+    it('should submit form', () => {
-      let firstNameElement = element.all(by.css('input[id=firstName]')).get(0);
+      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);
+      const emailElement = element.all(by.css('input[id=emailAddress]')).get(0);
-      let email = 'test@test.com';
+      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);
+      const saveButton = element.all(by.css('button')).get(0);
-      saveButton.click().then(function() {
+      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,
+      value?: T;
-      key?: string,
+      key?: string;
-      label?: string,
+      label?: string;
-      required?: boolean,
+      required?: boolean;
-      order?: number,
+      order?: number;
-      controlType?: string,
+      controlType?: string;
-      type?: 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; }
+  private _message: string;
-  _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(() => {
-
-  beforeEach(function () {
     browser.get('');
   });
 
-  let saveButton = element.all(by.css('button')).get(0);
+  const saveButton = element.all(by.css('button')).get(0);
-  let onSaveButton = element.all(by.css('button')).get(1);
+  const onSaveButton = element.all(by.css('button')).get(1);
-  let myClick = element.all(by.css('button')).get(2);
+  const myClick = element.all(by.css('button')).get(2);
-  let deleteButton = element.all(by.css('button')).get(3);
+  const deleteButton = element.all(by.css('button')).get(3);
-  let saveNoProp = element.all(by.css('button')).get(4);
+  const saveNoProp = element.all(by.css('button')).get(4);
-  let saveProp = element.all(by.css('button')).get(5);
+  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 () {
+  it('should support user input', () => {
-    let input = element(by.css('input'));
+    const input = element(by.css('input'));
-    let bindingResult = element.all(by.css('h4')).get(1);
+    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'));
+    const parentDiv = element.all(by.css('.parent-div'));
-    let childDiv = element.all(by.css('div > div')).get(1);
+    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));
+  const section = element(by.css(sectionTag));
-  let buttons = section.all(by.css('button'));
+  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),
+      alterEgo: new FormControl(this.hero.alterEgo),
-      'power': new FormControl(this.hero.power, Validators.required)
+      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/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/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 () {
+  it('should not display message before submit', () => {
-    let ele = element(by.css('h2'));
+    const ele = element(by.css('h2'));
     expect(ele.isDisplayed()).toBe(false);
   });
 
-  it('should hide form after submit', function () {
+  it('should hide form after submit', () => {
-    let ele = element.all(by.css('h1')).get(0);
+    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);
+    const b = element.all(by.css('button[type=submit]')).get(0);
-    b.click().then(function() {
+    b.click().then(() => {
       expect(ele.isDisplayed()).toBe(false);
     });
   });
 
-  it('should display message after submit', function () {
+  it('should display message after submit', () => {
-    let b = element.all(by.css('button[type=submit]')).get(0);
+    const b = element.all(by.css('button[type=submit]')).get(0);
-    b.click().then(function() {
+    b.click().then(() => {
       expect(element(by.css('h2')).getText()).toContain('You submitted the following');
     });
   });
 
-  it('should hide form after submit', function () {
+  it('should hide form after submit', () => {
-    let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
+    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);
+    const submitButtonEle = element.all(by.css('button[type=submit]')).get(0);
-    submitButtonEle.click().then(function() {
+    submitButtonEle.click().then(() => {
       expect(alterEgoEle.isDisplayed()).toBe(false);
     });
   });
 
-  it('should reflect submitted data after submit', function () {
+  it('should reflect submitted data after submit', () => {
-    let test = 'testing 1 2 3';
+    const test = 'testing 1 2 3';
     let newValue: string;
-    let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
+    const alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
-    alterEgoEle.getAttribute('value').then(function(value: string) {
+    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() {
+    }).then(() => {
-      let alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego'));
+      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(() => {
+  beforeEach(() => browser.get('/'));
-    return 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'],
+          heroesUrl: data.heroesUrl,
-          textfile:  data['textfile']
+          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>
+  createHandleError = (serviceName = '') => {
-    (operation = 'operation', result = {} as T) => this.handleError(serviceName, operation, result);
+    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() };
+    const newEntry = { url, response, lastRead: Date.now() };
-    this.cache.set(url, entry);
+    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 () {
+function bootstrap() {
-  if (window['jasmineRef']) {
+  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(() => {
+  beforeEach(() => browser.get(''));
-    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 }) =>
+    const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1);
-      message.indexOf(contents) !== -1 ? true : false
+    expect(messages.length).toBeGreaterThan(0);
-    );
-    console.log(message);
-    expect(message.length).toBeGreaterThan(0);
   }
 
-  it('should have title Inputs and Outputs', function () {
+  it('should have title Inputs and Outputs', () => {
-    let title = element.all(by.css('h1')).get(0);
+    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);
+    const addToParentButton = element.all(by.css('button')).get(0);
-    let addToListInput = element.all(by.css('input')).get(0);
+    const addToListInput = element.all(by.css('input')).get(0);
-    let addedItem = element.all(by.css('li')).get(4);
+    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);
+    const addToParentButton = element.all(by.css('button')).get(4);
-    let addedItem = element.all(by.css('li')).get(6);
+    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: no-input-rename no-output-rename use-input-property-decorator use-output-property-decorator
-/* tslint:disable:use-output-property-decorator */
-
-/* tslint:disable:no-input-rename */
-
-
 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() {
+  it('should display two pictures', () => {
-    let pottedPlant = element.all(by.css('img')).get(0);
+    const pottedPlant = element.all(by.css('img')).get(0);
-    let lamp = element.all(by.css('img')).get(1);
+    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 () {
+  it('should support user input', () => {
-    let input = element(by.css('input'));
+    const input = element(by.css('input'));
-    let label = element(by.css('label'));
+    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() {
+  describe('Customers', () => {
-    beforeEach(function() {
+    beforeEach(() => {
       customersButton.click();
     });
 
-    it('should show customers when the button is clicked', function() {
+    it('should show customers when the button is clicked', () => {
-        let customersMessage = element(by.css('app-customers > p'));
+        const customersMessage = element(by.css('app-customers > p'));
         expect(customersMessage.getText()).toBe('customers works!');
     });
 
   });
 
-  describe('Orders', function() {
+  describe('Orders', () => {
-    beforeEach(function() {
+    beforeEach(() => {
       ordersButton.click();
     });
 
-    it('should show orders when the button is clicked', function() {
+    it('should show orders when the button is clicked', () => {
-        let ordersMessage = element(by.css('app-orders > p'));
+        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);
+    const 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 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);
+    const onChangesViewEle = element.all(by.css('on-changes div')).get(0);
-    let inputEles = element.all(by.css('on-changes-parent input'));
+    const inputEles = element.all(by.css('on-changes-parent input'));
-    let heroNameInputEle = inputEles.get(1);
+    const heroNameInputEle = inputEles.get(1);
-    let powerInputEle = inputEles.get(0);
+    const powerInputEle = inputEles.get(0);
-    let titleEle = onChangesViewEle.element(by.css('p'));
+    const titleEle = onChangesViewEle.element(by.css('p'));
-    let changeLogEles = onChangesViewEle.all(by.css('div'));
+    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);
+    const doCheckViewEle = element.all(by.css('do-check div')).get(0);
-    let inputEles = element.all(by.css('do-check-parent input'));
+    const inputEles = element.all(by.css('do-check-parent input'));
-    let heroNameInputEle = inputEles.get(1);
+    const heroNameInputEle = inputEles.get(1);
-    let powerInputEle = inputEles.get(0);
+    const powerInputEle = inputEles.get(0);
-    let titleEle = doCheckViewEle.element(by.css('p'));
+    const titleEle = doCheckViewEle.element(by.css('p'));
-    let changeLogEles = doCheckViewEle.all(by.css('div'));
+    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'));
+    const parentEle = element(by.tagName('after-view-parent'));
-    let buttonEle = parentEle.element(by.tagName('button')); // Reset
+    const buttonEle = parentEle.element(by.tagName('button')); // Reset
-    let commentEle = parentEle.element(by.className('comment'));
+    const commentEle = parentEle.element(by.className('comment'));
-    let logEles = parentEle.all(by.css('h4 ~ div'));
+    const logEles = parentEle.all(by.css('h4 ~ div'));
-    let childViewInputEle = parentEle.element(by.css('app-child-view input'));
+    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'));
+    const parentEle = element(by.tagName('after-content-parent'));
-    let buttonEle = parentEle.element(by.tagName('button')); // Reset
+    const buttonEle = parentEle.element(by.tagName('button')); // Reset
-    let commentEle = parentEle.element(by.className('comment'));
+    const commentEle = parentEle.element(by.className('comment'));
-    let logEles = parentEle.all(by.css('h4 ~ div'));
+    const logEles = parentEle.all(by.css('h4 ~ div'));
-    let childViewInputEle = parentEle.element(by.css('app-child input'));
+    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'));
+    const inputEle = element(by.css('spy-parent input'));
-    let addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero'));
+    const addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero'));
-    let resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes'));
+    const resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes'));
-    let heroEles = element.all(by.css('spy-parent div[mySpy'));
+    const heroEles = element.all(by.css('spy-parent div[appSpy'));
-    let logEles = element.all(by.css('spy-parent h4 ~ div'));
+    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'));
+    const updateCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Update'));
-    let resetCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Reset'));
+    const resetCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Reset'));
-    let textEle = element(by.css('counter-parent app-counter > div'));
+    const textEle = element(by.css('counter-parent app-counter > div'));
-    let logEles = element.all(by.css('counter-parent h4 ~ 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;
+    const child = this.contentChild;
-    let message = `${method}: ${child ? child.hero : 'no'} child content`;
+    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;
+    const child = this.viewChild;
-    let message = `${method}: ${child ? child.hero : 'no'} child view`;
+    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'];
+    const chng = changes.counter;
-    let cur = chng.currentValue;
+    const cur = chng.currentValue;
-    let prev = JSON.stringify(chng.previousValue); // first time is {}; after is integer
+    const prev = JSON.stringify(chng.previousValue); // first time is {}; after is integer
     this.changeLog.push(`counter: currentValue = ${cur}, previousValue = ${prev}`);
   }
 }

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

@@ -51,8 +51,8 @@ export class DoCheckComponent implements DoCheck {
         this.noChangeCount = 0;
     } else {
         // log that hook was called when there was no relevant change.
-        let count = this.noChangeCount += 1;
+        const count = this.noChangeCount += 1;
-        let noChangeMsg = `DoCheck called ${count}x when no change to hero or power`;
+        const noChangeMsg = `DoCheck called ${count}x when no change to hero or power`;
         if (count === 1) {
           // add new "no change" message
           this.changeLog.push(noChangeMsg);

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

@@ -34,10 +34,10 @@ export class OnChangesComponent implements OnChanges {
 
   // #docregion ng-on-changes
   ngOnChanges(changes: SimpleChanges) {
-    for (let propName in changes) {
+    for (const propName in changes) {
-      let chng = changes[propName];
+      const chng = changes[propName];
-      let cur  = JSON.stringify(chng.currentValue);
+      const cur  = JSON.stringify(chng.currentValue);
-      let prev = JSON.stringify(chng.previousValue);
+      const prev = JSON.stringify(chng.previousValue);
       this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
     }
   }

aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts

@@ -1,3 +1,5 @@
+// tslint:disable: no-conflicting-lifecycle
+// #docregion
 import {
   AfterContentChecked,
   AfterContentInit,
@@ -48,16 +50,16 @@ export class PeekABooComponent extends PeekABooDirective implements
   constructor(logger: LoggerService) {
     super(logger);
 
-    let is = this.name ? 'is' : 'is not';
+    const is = this.name ? 'is' : 'is not';
     this.logIt(`name ${is} known at construction`);
   }
 
   // only called for/if there is an @input variable set by parent.
   ngOnChanges(changes: SimpleChanges) {
-    let changesMsgs: string[] = [];
+    const changesMsgs: string[] = [];
-    for (let propName in changes) {
+    for (const propName in changes) {
       if (propName === 'name') {
-        let name = changes['name'].currentValue;
+        const name = changes.name.currentValue;
         changesMsgs.push(`name ${this.verb} to "${name}"`);
       } else {
         changesMsgs.push(propName + ' ' + this.verb);