refactor(docs-infra): fix docs examples for tslint rule `only-arrow-functions` (#38143)

This commit updates the docs examples to be compatible with the
`only-arrow-functions` tslint rule.

This is in preparation of updating the docs examples `tslint.json` to
match the one generated for new Angular CLI apps in a future commit.

PR Close #38143

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

@@ -6,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/ajs-quick-reference/e2e/src/app.e2e-spec.ts

@@ -1,16 +1,16 @@
 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[] = [
       {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true},
@@ -49,23 +49,23 @@ 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!');
   });
 
@@ -84,7 +84,7 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
     let posterButton = element(by.css('app-movie-list tr > th > button'));
     expect(posterButton.getText()).toBe(expectedButtonText);
 
-    posterButton.click().then(function () {
+    posterButton.click().then(() => {
       testImagesAreDisplayed(isDisplayed);
     });
   }
@@ -99,7 +99,7 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
     let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
     let 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/architecture/e2e/src/app.e2e-spec.ts

@@ -36,7 +36,7 @@ function heroTests() {
     expect(page.heroes.count()).toEqual(3);
   });
 
-  it('has no hero details initially', function () {
+  it('has no hero details initially', () => {
     let page = getPageElts();
     expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
   });
@@ -61,12 +61,12 @@ function heroTests() {
 }
 
 function salesTaxTests() {
-  it('has no sales tax initially', function () {
+  it('has no sales tax initially', () => {
     let 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();
     page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER);
     expect(page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00');

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

@@ -1,32 +1,32 @@
 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/binding-syntax/e2e/src/app.e2e-spec.ts

@@ -3,9 +3,7 @@ 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
@@ -16,23 +14,23 @@ describe('Binding syntax e2e tests', () => {
   }
 
 
-  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');
   });
 

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

@@ -1,12 +1,12 @@
 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);
     expect(title.getText()).toEqual('Built-in Directives');
   });
@@ -21,7 +21,7 @@ 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);
     let modifiedSentence = element.all(by.css('div')).get(1);
 
@@ -29,7 +29,7 @@ describe('Built-in Directives', function () {
     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);
     let normalSentence = element.all(by.css('div')).get(7);
 
@@ -37,7 +37,7 @@ describe('Built-in Directives', function () {
     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);
     let toggledDiv = element.all(by.css('app-item-detail')).get(0);
 
@@ -45,7 +45,7 @@ describe('Built-in Directives', function () {
     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);
     let hiddenDiv = element.all(by.css('app-item-detail')).get(2);
 
@@ -53,12 +53,12 @@ describe('Built-in Directives', function () {
     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'));
     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);
     let tvDiv = element(by.css('app-lost-item'));
 

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

@@ -1,16 +1,16 @@
 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);
     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'));
     expect(header.getText()).toContain('$any( )');
   });

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

@@ -1,20 +1,20 @@
 import { browser, element, by } from 'protractor';
 
-describe('Component Communication Cookbook Tests', function () {
+describe('Component Communication Cookbook Tests', () => {
 
   // Note: '?e2e' which app can read to know it is running in protractor
   // e.g. `if (!/e2e/.test(location.search)) { ...`
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('?e2e');
   });
 
-  describe('Parent-to-child communication', function() {
+  describe('Parent-to-child communication', () => {
     // #docregion parent-to-child
     // ...
     let _heroNames = ['Dr IQ', 'Magneta', 'Bombasto'];
     let _masterName = 'Master';
 
-    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);
       let heroes = parent.all(by.tagName('app-hero-child'));
 
@@ -29,10 +29,10 @@ describe('Component Communication Cookbook Tests', function () {
     // #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;
       let _nonEmptyName = '"Dr IQ"';
       let parent = element.all(by.tagName('app-name-parent')).get(0);
@@ -42,7 +42,7 @@ describe('Component Communication Cookbook Tests', function () {
       expect(displayName).toEqual(_nonEmptyName);
     });
 
-    it('should replace empty name with default name', function () {
+    it('should replace empty name with default name', () => {
       let _emptyNameIndex = 1;
       let _defaultName = '"<no name set>"';
       let parent = element.all(by.tagName('app-name-parent')).get(0);
@@ -55,11 +55,11 @@ describe('Component Communication Cookbook Tests', function () {
     // #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();
 
       let initialLabel = 'Version 1.23';
@@ -70,12 +70,12 @@ describe('Component Communication Cookbook Tests', function () {
       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'));
       let 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();
 
           let labelAfter2Minor = 'Version 1.25';
@@ -88,11 +88,11 @@ 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'));
       let newMajorButton = repoTag.all(by.tagName('button')).get(1);
 
-      newMajorButton.click().then(function() {
+      newMajorButton.click().then(() => {
         let actual = getActual();
 
         let labelAfterMajor = 'Version 2.0';
@@ -121,29 +121,29 @@ 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'))
         .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)
         .all(by.tagName('button')).get(0);
-      agreeButton1.click().then(function() {
+      agreeButton1.click().then(() => {
         let 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)
         .all(by.tagName('button')).get(1);
-      agreeButton1.click().then(function() {
+      agreeButton1.click().then(() => {
         let voteLabel = element(by.tagName('app-vote-taker'))
           .element(by.tagName('h3')).getText();
         expect(voteLabel).toBe('Agree: 1, Disagree: 1');
@@ -155,18 +155,18 @@ 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));
       let message = parent.element(by.tagName('app-countdown-timer')).getText();
       browser.sleep(10); // give `seconds` a chance to catchup with `message`
@@ -174,11 +174,11 @@ describe('Component Communication Cookbook Tests', function () {
       expect(message).toContain(seconds);
     });
 
-    it('should stop the countdown', function () {
+    it('should stop the countdown', () => {
       let parent = element(by.tagName(parentTag));
       let 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();
         expect(message).toContain('Holding');
       });
@@ -188,28 +188,28 @@ 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'));
       let announceButton = missionControl.all(by.tagName('button')).get(0);
-      announceButton.click().then(function () {
+      announceButton.click().then(() => {
         let 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');
     });
 
@@ -217,7 +217,7 @@ describe('Component Communication Cookbook Tests', function () {
       let _confirmedLog = ' confirmed the mission';
       let missionControl = element(by.tagName('app-mission-control'));
       let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
-      confirmButton.click().then(function () {
+      confirmButton.click().then(() => {
         let history = missionControl.all(by.tagName('li'));
         expect(history.count()).toBe(expectedLogCount);
         expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + _confirmedLog);

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

@@ -1,12 +1,12 @@
 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'));
     let externalH1 = element(by.css('body > h1'));
 
@@ -17,26 +17,26 @@ describe('Component Style Tests', function () {
   });
 
 
-  it('allows styling :host element', function() {
+  it('allows styling :host element', () => {
     let 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'));
 
     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'));
 
     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'));
     let contentH3 = element(by.css('app-hero-controls h3'));
 
@@ -44,20 +44,20 @@ describe('Component Style Tests', function () {
     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'));
 
     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'));
     let 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'));
     let externalLi = element(by.css('body > ul li'));
 

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

@@ -1,72 +1,72 @@
 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);
       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);
       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);
       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);
       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);
       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);
       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);
       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);
       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);
       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);
       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();
       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();
       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"]'));
       let yellow = 'rgba(255, 255, 0, 1)';
 
@@ -79,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'));
       let craig1 = element(by.css('alex craig'));
       let carol1 = element(by.css('alex carol p'));
       let 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/e2e/src/app.e2e-spec.ts

@@ -1,200 +1,196 @@
 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'));
       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'));
       expect(heroes.count()).toBeGreaterThan(0);
 
       let 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);
         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'));
         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'));
         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'));
         expect(heroes.count()).toBeGreaterThan(0);
 
-        let filteredHeroes = heroes.filter(function(elem: ElementFinder, index: number) {
+        let 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/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/displaying-data/e2e/src/app.e2e-spec.ts

@@ -1,27 +1,27 @@
 import { browser, element, by } from 'protractor';
 
-describe('Displaying Data Tests', function () {
+describe('Displaying Data Tests', () => {
   let _title = 'Tour of Heroes';
   let _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);
   });
 
-  it('should have correct default hero:  ' + _defaultHero, function () {
+  it('should have correct default hero:  ' + _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'));
     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,13 +1,13 @@
 import { browser, element, by } from 'protractor';
 
-describe('Docs Style Guide', function () {
+describe('Docs Style Guide', () => {
   let _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);
   });
 });

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

@@ -1,13 +1,13 @@
 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']"));
     let name = element(by.xpath("//h3[text()='Bombasto']"));
     let bio = element(by.xpath("//p[text()='Brave as they come']"));

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

@@ -1,13 +1,13 @@
 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);
       expect(firstNameElement.getAttribute('value')).toEqual('Bombasto');
 
@@ -19,7 +19,7 @@ describe('Dynamic Form', function () {
       element(by.css('select option[value="solid"]')).click();
 
       let 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/event-binding/e2e/src/app.e2e-spec.ts

@@ -1,8 +1,8 @@
 import { browser, element, by, protractor } from 'protractor';
 
-describe('Event binding example', function () {
+describe('Event binding example', () => {
 
-  beforeEach(function () {
+  beforeEach(() => {
     browser.get('');
   });
 
@@ -14,11 +14,11 @@ describe('Event binding example', function () {
   let 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');
@@ -27,7 +27,7 @@ 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'));
     let bindingResult = element.all(by.css('h4')).get(1);
     expect(bindingResult.getText()).toEqual('Result: teapot');

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

@@ -1,9 +1,9 @@
 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('');
   });
 
@@ -71,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();
@@ -103,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!
@@ -111,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')))
@@ -171,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();
@@ -182,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();
@@ -192,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');
 
@@ -203,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');
 
@@ -218,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');
 
@@ -232,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/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/e2e/src/app.e2e-spec.ts

@@ -1,57 +1,57 @@
 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'));
     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);
     expect(ele.isDisplayed()).toBe(true);
     let 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);
-    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);
     expect(alterEgoEle.isDisplayed()).toBe(true);
     let 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';
     let newValue: string;
     let 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);
       return b.click();
-    }).then(function() {
+    }).then(() => {
       let alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego'));
       expect(alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label');
       let divEle = element(by.cssContainingText('div', newValue));

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

@@ -28,7 +28,7 @@ let checkLogForMessage = (message: string) => {
   expect(page.logList.getText()).toContain(message);
 };
 
-describe('Http Tests', function() {
+describe('Http Tests', () => {
   beforeEach(() => {
     browser.get('');
   });

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,7 +1,7 @@
 import { browser, element, by } from 'protractor';
 import { logging } from 'selenium-webdriver';
 
-describe('Inputs and Outputs', function () {
+describe('Inputs and Outputs', () => {
 
 
   beforeEach(() => {
@@ -22,7 +22,7 @@ describe('Inputs and Outputs', function () {
     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);
     expect(title.getText()).toEqual('Inputs and Outputs');
   });

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

@@ -2,31 +2,31 @@ 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);
     let lamp = element.all(by.css('img')).get(1);
 
@@ -37,7 +37,7 @@ 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'));
     let label = element(by.css('label'));
     expect(label.getText()).toEqual('Type something:');

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

@@ -18,24 +18,24 @@ 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'));
         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'));
         expect(ordersMessage.getText()).toBe('orders works!');
     });

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

@@ -1,6 +1,6 @@
 import { browser, element, by } from 'protractor';
 
-describe('NgModule-example', function () {
+describe('NgModule-example', () => {
 
   // helpers
   const lightgray = 'rgba(239, 238, 237, 1)';
@@ -55,13 +55,13 @@ describe('NgModule-example', function () {
 
   // tests
   function appTitleTests(color: string, name?: string) {
-    return function() {
+    return () => {
-      it('should have a gray header', function() {
+      it('should have a gray header', () => {
         const commons = getCommonsSectionStruct();
         expect(commons.title.getCssValue('backgroundColor')).toBe(color);
       });
 
-      it('should welcome us', function () {
+      it('should welcome us', () => {
         const commons = getCommonsSectionStruct();
         expect(commons.subtitle.getText()).toBe('Welcome, ' + (name ||  'Miss Marple'));
       });
@@ -69,33 +69,33 @@ describe('NgModule-example', function () {
   }
 
   function contactTests(color: string, name?: string) {
-    return function() {
+    return () => {
-      it('shows the contact\'s owner', function() {
+      it('shows the contact\'s owner', () => {
         const contacts = getContactSectionStruct();
         expect(contacts.header.getText()).toBe((name ||  'Miss Marple') + '\'s Contacts');
       });
 
-      it('can cycle between contacts', function () {
+      it('can cycle between contacts', () => {
         const contacts = getContactSectionStruct();
         const nextButton = contacts.nextContactButton;
         expect(contacts.contactNameHeader.getText()).toBe('Awesome Yasha');
         expect(contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color);
-        nextButton.click().then(function () {
+        nextButton.click().then(() => {
           expect(contacts.contactNameHeader.getText()).toBe('Awesome Iulia');
           return nextButton.click();
-        }).then(function () {
+        }).then(() => {
           expect(contacts.contactNameHeader.getText()).toBe('Awesome Karina');
         });
       });
 
-      it('can create a new contact', function () {
+      it('can create a new contact', () => {
         const contacts = getContactSectionStruct();
         const newContactButton = contacts.newContactButton;
         const nextButton = contacts.nextContactButton;
         const input = contacts.input;
         const saveButton = contacts.saveButton;
 
-        newContactButton.click().then(function () {
+        newContactButton.click().then(() => {
           input.click();
           nextButton.click();
           expect(contacts.validationError.getText()).toBe('Name is required.');
@@ -109,8 +109,8 @@ describe('NgModule-example', function () {
     };
   }
 
-  describe('index.html', function () {
+  describe('index.html', () => {
-    beforeEach(function () {
+    beforeEach(() => {
       browser.get('');
     });
 
@@ -118,36 +118,36 @@ describe('NgModule-example', function () {
 
     describe('contact', contactTests(lightgray, 'Miss Marple'));
 
-    describe('item center', function () {
+    describe('item center', () => {
-      beforeEach(function () {
+      beforeEach(() => {
         getCommonsSectionStruct().itemButton.click();
       });
 
-      it('shows a list of items', function () {
+      it('shows a list of items', () => {
         const item = getItemSectionStruct();
         expect(item.title.getText()).toBe('Items List');
         expect(item.items.count()).toBe(4);
         expect(item.items.get(0).getText()).toBe('1 - Sticky notes');
       });
 
-      it('can navigate to one item details', function () {
+      it('can navigate to one item details', () => {
         const item = getItemSectionStruct();
-        item.items.get(0).click().then(function() {
+        item.items.get(0).click().then(() => {
           expect(item.itemId.getText()).toBe('Item id: 1');
           return item.listLink.click();
-        }).then(function () {
+        }).then(() => {
           // We are back to the list
           expect(item.items.count()).toBe(4);
         });
       });
     });
 
-    describe('customers', function () {
+    describe('customers', () => {
-      beforeEach(function () {
+      beforeEach(() => {
         getCommonsSectionStruct().customersButton.click();
       });
 
-      it('shows a list of customers', function() {
+      it('shows a list of customers', () => {
         const customers = getCustomersSectionStruct();
         expect(customers.header.getText()).toBe('Customers of Miss Marple times 2');
         expect(customers.title.getText()).toBe('Customer List');
@@ -155,13 +155,13 @@ describe('NgModule-example', function () {
         expect(customers.items.get(0).getText()).toBe('11 - Julian');
       });
 
-      it('can navigate and edit one customer details', function () {
+      it('can navigate and edit one customer details', () => {
         const customers = getCustomersSectionStruct();
-        customers.items.get(0).click().then(function () {
+        customers.items.get(0).click().then(() => {
           expect(customers.itemId.getText()).toBe('Id: 11');
           customers.itemInput.sendKeys(' try');
           return customers.listLink.click();
-        }).then(function () {
+        }).then(() => {
           // We are back to the list
           expect(customers.items.count()).toBe(6);
           expect(customers.items.get(0).getText()).toBe('11 - Julian try');

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

@@ -1,31 +1,31 @@
 import { browser, element, by } from 'protractor';
 const { version: angularVersion } = require('@angular/core/package.json');
 
-describe('Pipes', function () {
+describe('Pipes', () => {
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should open correctly', function () {
+  it('should open correctly', () => {
     expect(element.all(by.tagName('h1')).get(0).getText()).toEqual('Pipes');
     expect(element(by.css('app-hero-birthday p')).getText()).toEqual(`The hero's birthday is Apr 15, 1988`);
   });
 
-  it('should show 4 heroes', function () {
+  it('should show 4 heroes', () => {
     expect(element.all(by.css('app-hero-list div')).count()).toEqual(4);
   });
 
-  it('should show a familiar hero in json', function () {
+  it('should show a familiar hero in json', () => {
     expect(element(by.cssContainingText('app-hero-list p', 'Heroes as JSON')).getText()).toContain('Bombasto');
   });
 
-  it('should show alternate birthday formats', function () {
+  it('should show alternate birthday formats', () => {
     expect(element(by.cssContainingText('app-root > p', `The hero's birthday is Apr 15, 1988`)).isDisplayed()).toBe(true);
     expect(element(by.cssContainingText('app-root > p', `The hero's birthday is 04/15/88`)).isDisplayed()).toBe(true);
   });
 
-  it('should be able to toggle birthday formats', function () {
+  it('should be able to toggle birthday formats', () => {
     let birthDayEle = element(by.css('app-hero-birthday2 > p'));
     if (angularVersion.indexOf('4.') === 0) { // Breaking change between v4 and v5 (https://github.com/angular/angular/commit/079d884)
       expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/1988`);
@@ -34,12 +34,12 @@ describe('Pipes', function () {
     }
     let buttonEle = element(by.cssContainingText('app-hero-birthday2 > button', 'Toggle Format'));
     expect(buttonEle.isDisplayed()).toBe(true);
-    buttonEle.click().then(function() {
+    buttonEle.click().then(() => {
       expect(birthDayEle.getText()).toEqual(`The hero's birthday is Friday, April 15, 1988`);
     });
   });
 
-  it('should be able to chain and compose pipes', function () {
+  it('should be able to chain and compose pipes', () => {
     let chainedPipeEles = element.all(by.cssContainingText('app-root p', `The chained hero's`));
     expect(chainedPipeEles.count()).toBe(3, 'should have 3 chained pipe examples');
     expect(chainedPipeEles.get(0).getText()).toContain('APR 15, 1988');
@@ -47,27 +47,27 @@ describe('Pipes', function () {
     expect(chainedPipeEles.get(2).getText()).toContain('FRIDAY, APRIL 15, 1988');
   });
 
-  it('should be able to use ExponentialStrengthPipe pipe', function () {
+  it('should be able to use ExponentialStrengthPipe pipe', () => {
     let ele = element(by.css('app-power-booster p'));
     expect(ele.getText()).toContain('Super power boost: 1024');
   });
 
-  it('should be able to use the exponential calculator', function () {
+  it('should be able to use the exponential calculator', () => {
     let eles = element.all(by.css('app-power-boost-calculator input'));
     let baseInputEle = eles.get(0);
     let factorInputEle = eles.get(1);
     let outputEle = element(by.css('app-power-boost-calculator p'));
-    baseInputEle.clear().then(function() {
+    baseInputEle.clear().then(() => {
       baseInputEle.sendKeys('7');
       return factorInputEle.clear();
-    }).then(function() {
+    }).then(() => {
       factorInputEle.sendKeys('3');
       expect(outputEle.getText()).toContain('343');
     });
   });
 
 
-  it('should support flying heroes (pure) ', function () {
+  it('should support flying heroes (pure) ', () => {
     let nameEle = element(by.css('app-flying-heroes input[type="text"]'));
     let canFlyCheckEle = element(by.css('app-flying-heroes #can-fly'));
     let mutateCheckEle = element(by.css('app-flying-heroes #mutate'));
@@ -80,20 +80,20 @@ describe('Pipes', function () {
 
     nameEle.sendKeys('test1\n');
     expect(flyingHeroesEle.count()).toEqual(2, 'no change while mutating array');
-    mutateCheckEle.click().then(function() {
+    mutateCheckEle.click().then(() => {
       nameEle.sendKeys('test2\n');
       expect(flyingHeroesEle.count()).toEqual(4, 'not mutating; should see both adds');
       expect(flyingHeroesEle.get(2).getText()).toContain('test1');
       expect(flyingHeroesEle.get(3).getText()).toContain('test2');
       return resetEle.click();
     })
-    .then(function() {
+    .then(() => {
        expect(flyingHeroesEle.count()).toEqual(2, 'reset should restore original flying heroes');
     });
   });
 
 
-  it('should support flying heroes (impure) ', function () {
+  it('should support flying heroes (impure) ', () => {
     let nameEle = element(by.css('app-flying-heroes-impure input[type="text"]'));
     let canFlyCheckEle = element(by.css('app-flying-heroes-impure #can-fly'));
     let mutateCheckEle = element(by.css('app-flying-heroes-impure #mutate'));
@@ -107,7 +107,7 @@ describe('Pipes', function () {
     expect(flyingHeroesEle.count()).toEqual(3, 'new flying hero should show in mutating array');
   });
 
-  it('should show an async hero message', function () {
+  it('should show an async hero message', () => {
     expect(element.all(by.tagName('app-hero-message')).get(0).getText()).toContain('hero');
   });
 

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

@@ -3,52 +3,52 @@ import { browser, element, by } from 'protractor';
 
 describe('Property binding e2e tests', () => {
 
-  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('Property Binding with Angular');
   });
 
-  it('should display four phone pictures', function() {
+  it('should display four phone pictures', () => {
     expect(element.all(by.css('img')).isPresent()).toBe(true);
     expect(element.all(by.css('img')).count()).toBe(4);
 
   });
 
-  it('should display Disabled button', function () {
+  it('should display Disabled button', () => {
     expect(element.all(by.css('button')).get(0).getText()).toBe(`Disabled Button`);
   });
 
-  it('should display Binding to a property of a directive', function () {
+  it('should display Binding to a property of a directive', () => {
     expect(element.all(by.css('h2')).get(4).getText()).toBe(`Binding to a property of a directive`);
   });
 
-  it('should display Your item is: lamp', function () {
+  it('should display Your item is: lamp', () => {
     expect(element.all(by.css('p')).get(0).getText()).toContain(`blue`);
   });
-  it('should display Your item is: lamp', function () {
+  it('should display Your item is: lamp', () => {
     expect(element.all(by.css('p')).get(1).getText()).toContain(`Your item is: lamp`);
   });
 
-  it('should display Your item is: parentItem', function () {
+  it('should display Your item is: parentItem', () => {
     expect(element.all(by.css('p')).get(2).getText()).toBe(`Your item is: parentItem`);
   });
 
-  it('should display a ul', function () {
+  it('should display a ul', () => {
     expect(element.all(by.css('ul')).get(0).getText()).toContain(`tv`);
   });
 
-  it('should display a ul containing phone', function () {
+  it('should display a ul containing phone', () => {
     expect(element.all(by.css('ul')).get(1).getText()).toBe(`21 phone`);
   });
 
-  it('should display one-time initialized string', function () {
+  it('should display one-time initialized string', () => {
     expect(element.all(by.css('p')).get(3).getText()).toContain(`one-time initialized`);
   });
 
-  it('should display Malicious content', function () {
+  it('should display Malicious content', () => {
     expect(element.all(by.css('h2')).get(8).getText()).toBe(`Malicious content`);
   });
 });

aio/content/examples/providers-viewproviders/e2e/src/app.e2e-spec.ts

@@ -1,22 +1,22 @@
 import { browser, element, by } from 'protractor';
 import { logging } from 'selenium-webdriver';
 
-describe('Providers and ViewProviders', function () {
+describe('Providers and ViewProviders', () => {
 
 
   beforeEach(() => {
     browser.get('');
   });
 
-  it('shows basic flower emoji', function() {
+  it('shows basic flower emoji', () => {
     expect(element.all(by.css('p')).get(0).getText()).toContain('🌺');
   });
 
-  it('shows whale emoji', function() {
+  it('shows whale emoji', () => {
     expect(element.all(by.css('p')).get(1).getText()).toContain('🐳');
   });
 
-  it('shows sunflower from FlowerService', function() {
+  it('shows sunflower from FlowerService', () => {
     expect(element.all(by.css('p')).get(8).getText()).toContain('🌻');
   });
 

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

@@ -27,7 +27,7 @@ describe('providers App', () => {
   });
 
 
-  it('shows a list of customers', function() {
+  it('shows a list of customers', () => {
     const list = getListSectionStruct();
     expect(list.items.count()).toBe(10);
     expect(list.items.get(0).getText()).toBe('1 Maria');

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

@@ -1,16 +1,16 @@
 import { browser, element, by } from 'protractor';
 
-describe('Reactive forms', function () {
+describe('Reactive forms', () => {
   const nameEditor = element(by.css('app-name-editor'));
   const profileEditor = element(by.css('app-profile-editor'));
   const nameEditorLink = element(by.cssContainingText('app-root > nav > a', 'Name Editor'));
   const profileEditorLink = element(by.cssContainingText('app-root > nav > a', 'Profile Editor'));
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  describe('Name Editor', function () {
+  describe('Name Editor', () => {
     const nameInput = nameEditor.element(by.css('input'));
     const updateButton = nameEditor.element(by.buttonText('Update Name'));
     const nameText = 'John Smith';
@@ -53,7 +53,7 @@ describe('Reactive forms', function () {
     });
   });
 
-  describe('Profile Editor', function () {
+  describe('Profile Editor', () => {
     const firstNameInput = getInput('firstName');
     const lastNameInput = getInput('lastName');
     const streetInput = getInput('street');

aio/content/examples/resolution-modifiers/e2e/src/app.e2e-spec.ts

@@ -1,20 +1,20 @@
 import { browser, element, by } from 'protractor';
 
-describe('Resolution-modifiers-example', function () {
+describe('Resolution-modifiers-example', () => {
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('shows basic flower emoji', function() {
+  it('shows basic flower emoji', () => {
     expect(element.all(by.css('p')).get(0).getText()).toContain('🌸');
   });
 
-  it('shows basic leaf emoji', function() {
+  it('shows basic leaf emoji', () => {
     expect(element.all(by.css('p')).get(1).getText()).toContain('🌿');
   });
 
-  it('shows yellow flower in host child', function() {
+  it('shows yellow flower in host child', () => {
     expect(element.all(by.css('p')).get(9).getText()).toContain('🌼');
   });
 

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

@@ -25,7 +25,7 @@ describe('sw-example App', () => {
     expect(listHeader.getText()).toEqual('Here are some links to help you start:');
   });
 
-  it('should show a list of links', function () {
+  it('should show a list of links', () => {
       element.all(by.css('ul > li > h2 > a')).then((items) => {
         expect(items.length).toBe(4);
         expect(items[0].getText()).toBe('Angular Service Worker Intro');

aio/content/examples/set-document-title/e2e/src/app.e2e-spec.ts

@@ -1,27 +1,25 @@
 import { browser, element, by, ElementFinder } from 'protractor';
 
-describe('Set Document Title', function () {
+describe('Set Document Title', () => {
 
-    beforeAll(function () {
+  beforeAll(() => browser.get(''));
-        browser.get('');
-    });
 
-    it('should set the document title', function () {
+  it('should set the document title', () => {
 
-      let titles = [
+    let titles = [
-        'Good morning!',
+      'Good morning!',
-        'Good afternoon!',
+      'Good afternoon!',
-        'Good evening!'
+      'Good evening!'
-      ];
+    ];
 
-      element.all( by.css( 'ul li a' ) ).each(
+    element.all( by.css( 'ul li a' ) ).each(
-        function iterator( element: ElementFinder, i: number ) {
+      function iterator( elem: ElementFinder, i: number ) {
 
-          element.click();
+        elem.click();
-          expect( browser.getTitle() ).toEqual( titles[ i ] );
+        expect( browser.getTitle() ).toEqual( titles[ i ] );
 
-        }
+      }
-      );
+    );
 
   });
 

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

@@ -1,14 +1,14 @@
 import { browser, element, by } from 'protractor';
 
-describe('QuickStart E2E Tests', function () {
+describe('QuickStart E2E Tests', () => {
 
   let expectedMsg = 'Hello Angular';
 
-  beforeEach(function () {
+  beforeEach(() => {
     browser.get('');
   });
 
-  it(`should display: ${expectedMsg}`, function () {
+  it(`should display: ${expectedMsg}`, () => {
     expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
   });
 

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

@@ -1,27 +1,27 @@
 import { browser, element, by } from 'protractor';
 
-describe('Structural Directives', function () {
+describe('Structural Directives', () => {
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('first div should show hero name with *ngIf', function () {
+  it('first div should show hero name with *ngIf', () => {
     const allDivs = element.all(by.tagName('div'));
     expect(allDivs.get(0).getText()).toEqual('Dr Nice');
   });
 
-  it('first li should show hero name with *ngFor', function () {
+  it('first li should show hero name with *ngFor', () => {
     const allLis = element.all(by.tagName('li'));
     expect(allLis.get(0).getText()).toEqual('Dr Nice');
   });
 
-  it('ngSwitch have two <happy-hero> instances', function () {
+  it('ngSwitch have two <happy-hero> instances', () => {
     const happyHeroEls = element.all(by.tagName('app-happy-hero'));
     expect(happyHeroEls.count()).toEqual(2);
   });
 
-  it('should toggle *ngIf="hero" with a button', function () {
+  it('should toggle *ngIf="hero" with a button', () => {
     const toggleHeroButton = element.all(by.cssContainingText('button', 'Toggle hero')).get(0);
     const paragraph = element.all(by.cssContainingText('p', 'I turned the corner'));
     expect(paragraph.get(0).getText()).toContain('I waved');
@@ -30,12 +30,12 @@ describe('Structural Directives', function () {
     });
   });
 
-  it('should have only one "Hip!" (the other is erased)', function () {
+  it('should have only one "Hip!" (the other is erased)', () => {
     const paragraph = element.all(by.cssContainingText('p', 'Hip!'));
     expect(paragraph.count()).toEqual(1);
   });
 
-  it('appUnless should show 3 paragraph (A)s and (B)s at the start', function () {
+  it('appUnless should show 3 paragraph (A)s and (B)s at the start', () => {
     const paragraph = element.all(by.css('p.unless'));
     expect(paragraph.count()).toEqual(3);
     for (let i = 0; i < 3; i++) {
@@ -43,7 +43,7 @@ describe('Structural Directives', function () {
     }
   });
 
-  it('appUnless should show 1 paragraph (B) after toggling condition', function () {
+  it('appUnless should show 1 paragraph (B) after toggling condition', () => {
     const toggleConditionButton = element.all(by.cssContainingText('button', 'Toggle condition')).get(0);
     const paragraph = element.all(by.css('p.unless'));
 

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

@@ -1,7 +1,7 @@
 import { browser, element, by } from 'protractor';
 
-describe('Style Guide', function () {
+describe('Style Guide', () => {
-  it('01-01', function () {
+  it('01-01', () => {
     browser.get('#/01-01');
 
     let pre = element(by.tagName('toh-heroes > pre'));
@@ -10,7 +10,7 @@ describe('Style Guide', function () {
     expect(pre.getText()).toContain('Magneta');
   });
 
-  it('02-07', function () {
+  it('02-07', () => {
     browser.get('#/02-07');
 
     let hero = element(by.tagName('toh-hero > div'));
@@ -20,77 +20,77 @@ describe('Style Guide', function () {
     expect(users.getText()).toBe('users component');
   });
 
-  it('02-08', function () {
+  it('02-08', () => {
     browser.get('#/02-08');
 
     let input = element(by.tagName('input[tohvalidate]'));
     expect(input.isPresent()).toBe(true);
   });
 
-  it('04-10', function () {
+  it('04-10', () => {
     browser.get('#/04-10');
 
     let div = element(by.tagName('sg-app > toh-heroes > div'));
     expect(div.getText()).toBe('This is heroes component');
   });
 
-  it('05-02', function () {
+  it('05-02', () => {
     browser.get('#/05-02');
 
     let button = element(by.tagName('sg-app > toh-hero-button > button'));
     expect(button.getText()).toBe('Hero button');
   });
 
-  it('05-03', function () {
+  it('05-03', () => {
     browser.get('#/05-03');
 
     let button = element(by.tagName('sg-app > toh-hero-button > button'));
     expect(button.getText()).toBe('Hero button');
   });
 
-  it('05-04', function () {
+  it('05-04', () => {
     browser.get('#/05-04');
 
     let h2 = element(by.tagName('sg-app > toh-heroes > div > h2'));
     expect(h2.getText()).toBe('My Heroes');
   });
 
-  it('05-12', function () {
+  it('05-12', () => {
     browser.get('#/05-12');
 
     let button = element(by.tagName('sg-app > toh-hero-button > button'));
     expect(button.getText()).toBe('OK');
   });
 
-  it('05-13', function () {
+  it('05-13', () => {
     browser.get('#/05-13');
 
     let button = element(by.tagName('sg-app > toh-hero-button > button'));
     expect(button.getText()).toBe('OK');
   });
 
-  it('05-14', function () {
+  it('05-14', () => {
     browser.get('#/05-14');
 
     let toast = element(by.tagName('sg-app > toh-toast'));
     expect(toast.getText()).toBe('...');
   });
 
-  it('05-15', function () {
+  it('05-15', () => {
     browser.get('#/05-15');
 
     let heroList = element(by.tagName('sg-app > toh-hero-list'));
     expect(heroList.getText()).toBe('...');
   });
 
-  it('05-16', function () {
+  it('05-16', () => {
     browser.get('#/05-16');
 
     let hero = element(by.tagName('sg-app > toh-hero'));
     expect(hero.getText()).toBe('...');
   });
 
-  it('05-17', function () {
+  it('05-17', () => {
     browser.get('#/05-17');
 
     let section = element(by.tagName('sg-app > toh-hero-list > section'));
@@ -99,14 +99,14 @@ describe('Style Guide', function () {
     expect(section.getText()).toContain('Average power');
   });
 
-  it('06-01', function () {
+  it('06-01', () => {
     browser.get('#/06-01');
 
     let div = element(by.tagName('sg-app > div[tohhighlight]'));
     expect(div.getText()).toBe('Bombasta');
   });
 
-  it('06-03', function () {
+  it('06-03', () => {
     browser.get('#/06-03');
 
     let input = element(by.tagName('input[tohvalidator]'));
@@ -114,7 +114,7 @@ describe('Style Guide', function () {
   });
 
   // temporarily disabled because of a weird issue when used with rxjs v6 with rxjs-compat
-  xit('07-01', function () {
+  xit('07-01', () => {
     browser.get('#/07-01');
 
     let lis = element.all(by.tagName('sg-app > ul > li'));
@@ -124,21 +124,21 @@ describe('Style Guide', function () {
     expect(lis.get(3).getText()).toBe('Tornado');
   });
 
-  it('07-03', function () {
+  it('07-03', () => {
     browser.get('#/07-03');
 
     let pre = element(by.tagName('toh-heroes > pre'));
     expect(pre.getText()).toContain('[]');
   });
 
-  it('07-04', function () {
+  it('07-04', () => {
     browser.get('#/07-04');
 
     let pre = element(by.tagName('toh-app > pre'));
     expect(pre.getText()).toContain('[]');
   });
 
-  it('09-01', function () {
+  it('09-01', () => {
     browser.get('#/09-01');
 
     let button = element(by.tagName('sg-app > toh-hero-button > button'));

aio/content/examples/template-expression-operators/e2e/src/app.e2e-spec.ts

@@ -1,28 +1,28 @@
 import { browser, element, by } from 'protractor';
 import { logging } from 'selenium-webdriver';
 
-describe('Template Expression Operators', function () {
+describe('Template Expression Operators', () => {
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should have title Inputs and Outputs', function () {
+  it('should have title Inputs and Outputs', () => {
     let title = element.all(by.css('h1')).get(0);
     expect(title.getText()).toEqual('Template Expression Operators');
   });
 
-  it('should display json data', function () {
+  it('should display json data', () => {
     let jsonDate = element.all(by.css('p')).get(4);
     expect(jsonDate.getText()).toContain('1980');
   });
 
-  it('should display $98', function () {
+  it('should display $98', () => {
     let jsonDate = element.all(by.css('p')).get(5);
     expect(jsonDate.getText()).toContain('$98.00');
   });
 
-  it('should display Telephone', function () {
+  it('should display Telephone', () => {
     let jsonDate = element.all(by.css('p')).get(6);
     expect(jsonDate.getText()).toContain('Telephone');
   });

aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts

@@ -1,8 +1,8 @@
 import { browser, element, by } from 'protractor';
 import { logging } from 'selenium-webdriver';
 
-describe('Template-reference-variables-example', function() {
+describe('Template-reference-variables-example', () => {
-  beforeEach(function() {
+  beforeEach(() => {
     browser.get('');
 
   });
@@ -19,7 +19,7 @@ describe('Template-reference-variables-example', function() {
     expect(message.length).toBeGreaterThan(0);
   }
 
-  it('should display Template reference variables', function() {
+  it('should display Template reference variables', () => {
     expect(element(by.css('h1')).getText()).toEqual(
       'Template reference variables'
     );
@@ -43,7 +43,7 @@ describe('Template-reference-variables-example', function() {
     await logChecker(faxButton, contents);
   });
 
-  it('should display a disabled button', function() {
+  it('should display a disabled button', () => {
     let disabledButton = element.all(by.css('button')).get(2);
     expect(disabledButton.isEnabled()).toBe(false);
   });

aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts

@@ -662,12 +662,12 @@ describe('demo (with TestBed):', () => {
 
       // DebugElement.queryAll: if we wanted all of many instances:
       childDe = fixture.debugElement
-        .queryAll(function (de) { return de.componentInstance instanceof MyIfChildComponent; })[0];
+        .queryAll(de => de.componentInstance instanceof MyIfChildComponent)[0];
 
       // WE'LL USE THIS APPROACH !
       // DebugElement.query: find first instance (if any)
       childDe = fixture.debugElement
-        .query(function (de) { return de.componentInstance instanceof MyIfChildComponent; });
+        .query(de => de.componentInstance instanceof MyIfChildComponent);
 
       if (childDe && childDe.componentInstance) {
         child = childDe.componentInstance;

aio/content/examples/testing/src/testing/jasmine-matchers.ts

@@ -11,7 +11,7 @@ export function addMatchers(): void {
 
 function toHaveText(): jasmine.CustomMatcher {
   return {
-    compare: function (actual: any, expectedText: string, expectationFailOutput?: any): jasmine.CustomMatcherResult {
+    compare: (actual: any, expectedText: string, expectationFailOutput?: any): jasmine.CustomMatcherResult => {
       const actualText = elementText(actual);
       const pass = actualText.indexOf(expectedText) > -1;
       const message = pass ? '' : composeMessage();

aio/content/examples/toh-pt0/e2e/src/app.e2e-spec.ts

@@ -1,9 +1,7 @@
 import { browser, element, by } from 'protractor';
 
 describe('Tour of Heroes', () => {
-  beforeEach(() => {
+  beforeEach(() => browser.get('/'));
-    return browser.get('/');
-  });
 
   it('should display "Tour of Heroes"', () => {
     let title = element(by.css('app-root h1')).getText();

aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts

@@ -59,7 +59,7 @@ function initialPageTests() {
     expect(page.heroes.count()).toEqual(10);
   });
 
-  it('has no selected hero and no hero details', function () {
+  it('has no selected hero and no hero details', () => {
     let page = getPageElts();
     expect(page.selected.isPresent()).toBeFalsy('selected hero');
     expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
@@ -67,13 +67,13 @@ function initialPageTests() {
 }
 
 function selectHeroTests() {
-  it(`selects ${targetHero.name} from hero list`, function () {
+  it(`selects ${targetHero.name} from hero list`, () => {
     let hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
     hero.click();
     // Nothing specific to expect other than lack of exceptions.
   });
 
-  it(`has selected ${targetHero.name}`, function () {
+  it(`has selected ${targetHero.name}`, () => {
     let page = getPageElts();
     let expectedText = `${targetHero.id} ${targetHero.name}`;
     expect(page.selected.getText()).toBe(expectedText);

aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts

@@ -59,7 +59,7 @@ function initialPageTests() {
     expect(page.heroes.count()).toEqual(10);
   });
 
-  it('has no selected hero and no hero details', function () {
+  it('has no selected hero and no hero details', () => {
     let page = getPageElts();
     expect(page.selected.isPresent()).toBeFalsy('selected hero');
     expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
@@ -67,13 +67,13 @@ function initialPageTests() {
 }
 
 function selectHeroTests() {
-  it(`selects ${targetHero.name} from hero list`, function () {
+  it(`selects ${targetHero.name} from hero list`, () => {
     let hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
     hero.click();
     // Nothing specific to expect other than lack of exceptions.
   });
 
-  it(`has selected ${targetHero.name}`, function () {
+  it(`has selected ${targetHero.name}`, () => {
     let page = getPageElts();
     let expectedText = `${targetHero.id} ${targetHero.name}`;
     expect(page.selected.getText()).toBe(expectedText);

aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts

@@ -59,7 +59,7 @@ function initialPageTests() {
     expect(page.heroes.count()).toEqual(10);
   });
 
-  it('has no selected hero and no hero details', function () {
+  it('has no selected hero and no hero details', () => {
     let page = getPageElts();
     expect(page.selected.isPresent()).toBeFalsy('selected hero');
     expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
@@ -67,13 +67,13 @@ function initialPageTests() {
 }
 
 function selectHeroTests() {
-  it(`selects ${targetHero.name} from hero list`, function () {
+  it(`selects ${targetHero.name} from hero list`, () => {
     let hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
     hero.click();
     // Nothing specific to expect other than lack of exceptions.
   });
 
-  it(`has selected ${targetHero.name}`, function () {
+  it(`has selected ${targetHero.name}`, () => {
     let page = getPageElts();
     let expectedText = `${targetHero.id} ${targetHero.name}`;
     expect(page.selected.getText()).toBe(expectedText);

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

@@ -2,7 +2,7 @@ import { browser, element, by } from 'protractor';
 
 describe('Two-way binding e2e tests', () => {
 
-  beforeEach(function () {
+  beforeEach(() => {
     browser.get('');
   });
 
@@ -11,11 +11,11 @@ describe('Two-way binding e2e tests', () => {
   let minus2Button = element.all(by.css('button')).get(2);
   let plus2Button = element.all(by.css('button')).get(3);
 
-  it('should display Two-way Binding', function () {
+  it('should display Two-way Binding', () => {
     expect(element(by.css('h1')).getText()).toEqual('Two-way Binding');
   });
 
-  it('should display four buttons', function() {
+  it('should display four buttons', () => {
     expect(minusButton.getText()).toBe('-');
     expect(plusButton.getText()).toBe('+');
     expect(minus2Button.getText()).toBe('-');
@@ -35,7 +35,7 @@ describe('Two-way binding e2e tests', () => {
     await expect(element.all(by.css('label')).get(2).getText()).toEqual('FontSize: 15px');
   });
 
-  it('should display De-sugared two-way binding', function () {
+  it('should display De-sugared two-way binding', () => {
     expect(element(by.css('h2')).getText()).toEqual('De-sugared two-way binding');
   });
 

aio/content/examples/upgrade-lazy-load-ajs/e2e/src/app.e2e-spec.ts

@@ -1,6 +1,6 @@
 import { browser, element, by, ExpectedConditions } from 'protractor';
 
-describe('Lazy Loading AngularJS Tests', function () {
+describe('Lazy Loading AngularJS Tests', () => {
   const pageElements = {
     homePageHref: element(by.cssContainingText('app-root nav a', 'Home')),
     homePageParagraph: element(by.css('app-root app-home p')),

aio/content/examples/upgrade-module/e2e-spec.ts

@@ -1,73 +1,73 @@
 import { browser, element, by } from 'protractor';
 
-describe('Upgrade Tests', function () {
+describe('Upgrade Tests', () => {
 
-  beforeAll(function () {
+  beforeAll(() => {
     // Set protractor to hybrid mode.
     browser.rootEl = 'body';
     browser.ng12Hybrid = true;
   });
 
-  describe('AngularJS Auto-bootstrap', function() {
+  describe('AngularJS Auto-bootstrap', () => {
 
-    beforeAll(function () {
+    beforeAll(() => {
       browser.get('/index-ng-app.html');
     });
 
-    it('bootstraps as expected', function () {
+    it('bootstraps as expected', () => {
       expect(element(by.css('#message')).getText()).toEqual('Hello world');
     });
 
   });
 
-  describe('AngularJS JavaScript Bootstrap', function() {
+  describe('AngularJS JavaScript Bootstrap', () => {
 
-    beforeAll(function () {
+    beforeAll(() => {
       browser.get('/index-bootstrap.html');
     });
 
-    it('bootstraps as expected', function () {
+    it('bootstraps as expected', () => {
       expect(element(by.css('#message')).getText()).toEqual('Hello world');
     });
 
   });
 
-  describe('AngularJS-Angular Hybrid Bootstrap', function() {
+  describe('AngularJS-Angular Hybrid Bootstrap', () => {
 
-    beforeAll(function () {
+    beforeAll(() => {
       browser.get('/index-ajs-a-hybrid-bootstrap.html');
     });
 
-    it('bootstraps as expected', function () {
+    it('bootstraps as expected', () => {
       expect(element(by.css('#message')).getText()).toEqual('Hello world');
     });
 
   });
 
-  describe('Upgraded static component', function() {
+  describe('Upgraded static component', () => {
 
-    beforeAll(function () {
+    beforeAll(() => {
       browser.get('/index-upgrade-static.html');
     });
 
-    it('renders', function () {
+    it('renders', () => {
       expect(element(by.css('h2')).getText()).toEqual('Windstorm details!');
     });
 
   });
 
 
-  describe('Upgraded component with IO', function() {
+  describe('Upgraded component with IO', () => {
 
-    beforeAll(function () {
+    beforeAll(() => {
       browser.get('/index-upgrade-io.html');
     });
 
-    it('has inputs', function () {
+    it('has inputs', () => {
       expect(element(by.css('h2')).getText()).toEqual('Windstorm details!');
     });
 
-    it('has outputs', function () {
+    it('has outputs', () => {
       element(by.buttonText('Delete')).click();
       expect(element(by.css('h2')).getText()).toEqual('Ex-Windstorm details!');
     });
@@ -75,86 +75,86 @@ describe('Upgrade Tests', function () {
   });
 
 
-  describe('Downgraded static component', function() {
+  describe('Downgraded static component', () => {
 
-    beforeAll(function () {
+    beforeAll(() => {
       browser.get('/index-downgrade-static.html');
     });
 
-    it('renders', function () {
+    it('renders', () => {
       expect(element(by.css('h2')).getText()).toEqual('Windstorm details!');
     });
 
   });
 
-  describe('Downgraded component with IO', function() {
+  describe('Downgraded component with IO', () => {
 
-    beforeAll(function () {
+    beforeAll(() => {
       browser.get('/index-downgrade-io.html');
     });
 
-    it('has inputs', function () {
+    it('has inputs', () => {
       expect(element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!');
     });
 
-    it('has outputs', function () {
+    it('has outputs', () => {
       element.all(by.buttonText('Delete')).first().click();
       expect(element.all(by.css('h2')).first().getText()).toEqual('Ex-Windstorm details!');
     });
 
-    it('supports ng-repeat', function () {
+    it('supports ng-repeat', () => {
       expect(element.all(by.css('hero-detail')).count()).toBe(3);
     });
 
   });
 
 
-  describe('Downgraded component with content projection', function() {
+  describe('Downgraded component with content projection', () => {
 
-    beforeAll(function () {
+    beforeAll(() => {
       browser.get('/index-ajs-to-a-projection.html');
     });
 
-    it('can be transcluded into', function () {
+    it('can be transcluded into', () => {
       expect(element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds');
     });
 
   });
 
 
-  describe('Upgraded component with transclusion', function() {
+  describe('Upgraded component with transclusion', () => {
 
-    beforeAll(function () {
+    beforeAll(() => {
       browser.get('/index-a-to-ajs-transclusion.html');
     });
 
-    it('can be projected into', function () {
+    it('can be projected into', () => {
       expect(element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds');
     });
 
   });
 
 
-  describe('Upgrading AngularJS Providers', function() {
+  describe('Upgrading AngularJS Providers', () => {
 
-    beforeAll(function () {
+    beforeAll(() => {
       browser.get('/index-ajs-to-a-providers.html');
     });
 
-    it('works', function () {
+    it('works', () => {
       expect(element(by.css('h2')).getText()).toBe('1: Windstorm');
     });
 
   });
 
 
-  describe('Downgrading Angular Providers', function() {
+  describe('Downgrading Angular Providers', () => {
 
-    beforeAll(function () {
+    beforeAll(() => {
       browser.get('/index-a-to-ajs-providers.html');
     });
 
-    it('works', function () {
+    it('works', () => {
       expect(element(by.css('h2')).getText()).toBe('1: Windstorm');
     });
 

aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts

@@ -5,7 +5,7 @@ angular.module('heroApp', [])
   });
 // #enddocregion ng1module
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', () => {
   // #docregion bootstrap
   angular.bootstrap(document.body, ['heroApp'], { strictDi: true });
   // #enddocregion bootstrap

aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts

@@ -12,7 +12,7 @@ export function heroDetailDirective() {
       <div><label>id: </label>{{$ctrl.hero.id}}</div>
       <button ng-click="$ctrl.onDelete()">Delete</button>
     `,
-    controller: function() {
+    controller: function HeroDetailController() {
       this.onDelete = () => {
         this.deleted({hero: this.hero});
       };

aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts

@@ -10,7 +10,7 @@ export const heroDetail = {
     <div><label>id: </label>{{$ctrl.hero.id}}</div>
     <button ng-click="$ctrl.onDelete()">Delete</button>
   `,
-  controller: function() {
+  controller: function HeroDetailController() {
     this.onDelete = () => {
       this.deleted(this.hero);
     };

aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts

@@ -5,7 +5,7 @@ export const heroDetail = {
     <h2>Windstorm details!</h2>
     <div><label>id: </label>1</div>
   `,
-  controller: function() {
+  controller: function HeroDetailController() {
   }
 };
 // #enddocregion hero-detail

aio/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts

@@ -3,7 +3,7 @@ describe('checkmark', () => {
   beforeEach(angular.mock.module('core'));
 
   it('should convert boolean values to unicode checkmark or cross',
-    inject(function(checkmarkFilter: (v: boolean) => string) {
+    inject((checkmarkFilter: (v: boolean) => string) => {
       expect(checkmarkFilter(true)).toBe('\u2713');
       expect(checkmarkFilter(false)).toBe('\u2718');
     })

aio/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts

@@ -1,8 +1,6 @@
 // #docregion
 angular.
   module('core').
-  filter('checkmark', function() {
+  filter('checkmark', () => {
-    return function(input: boolean) {
+    return (input: boolean) => input ? '\u2713' : '\u2718';
-      return input ? '\u2713' : '\u2718';
-    };
   });

aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts

@@ -8,7 +8,7 @@ describe('Phone', () => {
   ];
 
   // Add a custom equality tester before each test
-  beforeEach(function() {
+  beforeEach(() => {
     jasmine.addCustomEqualityTester(angular.equals);
   });
 
@@ -16,7 +16,7 @@ describe('Phone', () => {
   beforeEach(angular.mock.module('core.phone'));
 
   // Instantiate the service and "train" `$httpBackend` before each test
-  beforeEach(inject(function(_$httpBackend_: angular.IHttpBackendService, _Phone_: any) {
+  beforeEach(inject((_$httpBackend_: angular.IHttpBackendService, _Phone_: any) => {
     $httpBackend = _$httpBackend_;
     $httpBackend.expectGET('phones/phones.json').respond(phonesData);
 

aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts

@@ -2,7 +2,7 @@
 angular.
   module('core.phone').
   factory('Phone', ['$resource',
-    function($resource: angular.resource.IResourceService) {
+    ($resource: angular.resource.IResourceService) => {
       return $resource('phones/:phoneId.json', {}, {
         query: {
           method: 'GET',

aio/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts

@@ -3,20 +3,20 @@ import { browser, element, by, ElementArrayFinder, ElementFinder } from 'protrac
 // Angular E2E Testing Guide:
 // https://docs.angularjs.org/guide/e2e-testing
 
-describe('PhoneCat Application', function() {
+describe('PhoneCat Application', () => {
 
-  beforeAll(function() {
+  beforeAll(() => {
     browser.baseUrl = 'http://localhost:8080/app/';
     // protractor.config.js is set to ng2 mode by default, so we must manually change it
     browser.rootEl = 'body';
   });
 
-  it('should redirect `index.html` to `index.html#!/phones', function() {
+  it('should redirect `index.html` to `index.html#!/phones', () => {
     browser.get('index.html');
     expect(browser.getLocationAbsUrl()).toBe('/phones');
   });
 
-  describe('View: Phone list', function() {
+  describe('View: Phone list', () => {
 
     // Helpers
     const waitForCount = (elems: ElementArrayFinder, count: number) => {
@@ -24,11 +24,11 @@ describe('PhoneCat Application', function() {
       browser.wait(() => elems.count().then(c => c === count), 5000);
     };
 
-    beforeEach(function() {
+    beforeEach(() => {
       browser.get('index.html#!/phones');
     });
 
-    it('should filter the phone list as a user types into the search box', function() {
+    it('should filter the phone list as a user types into the search box', () => {
       let phoneList = element.all(by.repeater('phone in $ctrl.phones'));
       let query = element(by.model('$ctrl.query'));
 
@@ -45,16 +45,14 @@ describe('PhoneCat Application', function() {
       expect(phoneList.count()).toBe(8);
     });
 
-    it('should be possible to control phone order via the drop-down menu', function() {
+    it('should be possible to control phone order via the drop-down menu', () => {
       let queryField = element(by.model('$ctrl.query'));
       let orderSelect = element(by.model('$ctrl.orderProp'));
       let nameOption = orderSelect.element(by.css('option[value="name"]'));
       let phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name'));
 
       function getNames() {
-        return phoneNameColumn.map(function(elem: ElementFinder) {
+        return phoneNameColumn.map((elem: ElementFinder) => elem.getText());
-          return elem.getText();
-        });
       }
 
       queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
@@ -73,7 +71,7 @@ describe('PhoneCat Application', function() {
       ]);
     });
 
-    it('should render phone specific links', function() {
+    it('should render phone specific links', () => {
       let phoneList = element.all(by.repeater('phone in $ctrl.phones'));
       let query = element(by.model('$ctrl.query'));
 
@@ -89,23 +87,23 @@ describe('PhoneCat Application', function() {
 
   });
 
-  describe('View: Phone detail', function() {
+  describe('View: Phone detail', () => {
 
-    beforeEach(function() {
+    beforeEach(() => {
       browser.get('index.html#!/phones/nexus-s');
     });
 
-    it('should display the `nexus-s` page', function() {
+    it('should display the `nexus-s` page', () => {
       expect(element(by.binding('$ctrl.phone.name')).getText()).toBe('Nexus S');
     });
 
-    it('should display the first phone image as the main phone image', function() {
+    it('should display the first phone image as the main phone image', () => {
       let mainImage = element(by.css('img.phone.selected'));
 
       expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
     });
 
-    it('should swap the main image when clicking on a thumbnail image', function() {
+    it('should swap the main image when clicking on a thumbnail image', () => {
       let mainImage = element(by.css('img.phone.selected'));
       let thumbnails = element.all(by.css('.phone-thumbs img'));
 

aio/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts

@@ -1,9 +1,9 @@
 // #docregion
 import { CheckmarkPipe } from './checkmark.pipe';
 
-describe('CheckmarkPipe', function() {
+describe('CheckmarkPipe', () => {
 
-  it('should convert boolean values to unicode checkmark or cross', function () {
+  it('should convert boolean values to unicode checkmark or cross', () => {
     const checkmarkPipe = new CheckmarkPipe();
     expect(checkmarkPipe.transform(true)).toBe('\u2713');
     expect(checkmarkPipe.transform(false)).toBe('\u2718');

aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts

@@ -3,7 +3,7 @@ import { inject, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { Phone, PhoneData } from './phone.service';
 
-describe('Phone', function() {
+describe('Phone', () => {
   let phone: Phone;
   let phonesData: PhoneData[] = [
     {name: 'Phone X', snippet: '', images: []},

aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts

@@ -3,21 +3,21 @@ import { browser, element, by } from 'protractor';
 // Angular E2E Testing Guide:
 // https://docs.angularjs.org/guide/e2e-testing
 
-describe('PhoneCat Application', function() {
+describe('PhoneCat Application', () => {
 
-  it('should redirect `index.html` to `index.html#!/phones', function() {
+  it('should redirect `index.html` to `index.html#!/phones', () => {
     browser.get('index.html');
     browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine.
     expect(browser.getCurrentUrl()).toMatch(/\/phones$/);
   });
 
-  describe('View: Phone list', function() {
+  describe('View: Phone list', () => {
 
-    beforeEach(function() {
+    beforeEach(() => {
       browser.get('index.html#!/phones');
     });
 
-    it('should filter the phone list as a user types into the search box', function() {
+    it('should filter the phone list as a user types into the search box', () => {
       let phoneList = element.all(by.css('.phones li'));
       let query = element(by.css('input'));
 
@@ -31,16 +31,14 @@ describe('PhoneCat Application', function() {
       expect(phoneList.count()).toBe(8);
     });
 
-    it('should be possible to control phone order via the drop-down menu', function() {
+    it('should be possible to control phone order via the drop-down menu', () => {
       let queryField = element(by.css('input'));
       let orderSelect = element(by.css('select'));
       let nameOption = orderSelect.element(by.css('option[value="name"]'));
       let phoneNameColumn = element.all(by.css('.phones .name'));
 
       function getNames() {
-        return phoneNameColumn.map(function(elem) {
+        return phoneNameColumn.map((elem) => elem.getText());
-          return elem.getText();
-        });
       }
 
       queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
@@ -58,7 +56,7 @@ describe('PhoneCat Application', function() {
       ]);
     });
 
-    it('should render phone specific links', function() {
+    it('should render phone specific links', () => {
       let query = element(by.css('input'));
       query.sendKeys('nexus');
 
@@ -69,23 +67,23 @@ describe('PhoneCat Application', function() {
 
   });
 
-  describe('View: Phone detail', function() {
+  describe('View: Phone detail', () => {
 
-    beforeEach(function() {
+    beforeEach(() => {
       browser.get('index.html#!/phones/nexus-s');
     });
 
-    it('should display the `nexus-s` page', function() {
+    it('should display the `nexus-s` page', () => {
       expect(element(by.css('h1')).getText()).toBe('Nexus S');
     });
 
-    it('should display the first phone image as the main phone image', function() {
+    it('should display the first phone image as the main phone image', () => {
       let mainImage = element(by.css('img.phone.selected'));
 
       expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
     });
 
-    it('should swap the main image when clicking on a thumbnail image', function() {
+    it('should swap the main image when clicking on a thumbnail image', () => {
       let mainImage = element(by.css('img.phone.selected'));
       let thumbnails = element.all(by.css('.phone-thumbs img'));
 

aio/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts

@@ -1,8 +1,8 @@
 import { CheckmarkPipe } from './checkmark.pipe';
 
-describe('CheckmarkPipe', function() {
+describe('CheckmarkPipe', () => {
 
-  it('should convert boolean values to unicode checkmark or cross', function () {
+  it('should convert boolean values to unicode checkmark or cross', () => {
     const checkmarkPipe = new CheckmarkPipe();
     expect(checkmarkPipe.transform(true)).toBe('\u2713');
     expect(checkmarkPipe.transform(false)).toBe('\u2718');

aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts

@@ -2,7 +2,7 @@ import { inject, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { Phone, PhoneData } from './phone.service';
 
-describe('Phone', function() {
+describe('Phone', () => {
   let phone: Phone;
   let phonesData: PhoneData[] = [
     {name: 'Phone X', snippet: '', images: []},

aio/content/examples/upgrade-phonecat-3-final/e2e-spec.ts

@@ -3,25 +3,25 @@ import { browser, element, by } from 'protractor';
 // Angular E2E Testing Guide:
 // https://docs.angularjs.org/guide/e2e-testing
 
-describe('PhoneCat Application', function() {
+describe('PhoneCat Application', () => {
 
   // #docregion redirect
-  it('should redirect `index.html` to `index.html#!/phones', function() {
+  it('should redirect `index.html` to `index.html#!/phones', () => {
     browser.get('index.html');
     browser.waitForAngular();
-    browser.getCurrentUrl().then(function(url: string) {
+    browser.getCurrentUrl().then((url: string) => {
       expect(url.endsWith('/phones')).toBe(true);
     });
   });
   // #enddocregion redirect
 
-  describe('View: Phone list', function() {
+  describe('View: Phone list', () => {
 
-    beforeEach(function() {
+    beforeEach(() => {
       browser.get('index.html#!/phones');
     });
 
-    it('should filter the phone list as a user types into the search box', function() {
+    it('should filter the phone list as a user types into the search box', () => {
       let phoneList = element.all(by.css('.phones li'));
       let query = element(by.css('input'));
 
@@ -35,16 +35,14 @@ describe('PhoneCat Application', function() {
       expect(phoneList.count()).toBe(8);
     });
 
-    it('should be possible to control phone order via the drop-down menu', function() {
+    it('should be possible to control phone order via the drop-down menu', () => {
       let queryField = element(by.css('input'));
       let orderSelect = element(by.css('select'));
       let nameOption = orderSelect.element(by.css('option[value="name"]'));
       let phoneNameColumn = element.all(by.css('.phones .name'));
 
       function getNames() {
-        return phoneNameColumn.map(function(elem) {
+        return phoneNameColumn.map((elem) => elem.getText());
-          return elem.getText();
-        });
       }
 
       queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
@@ -63,11 +61,11 @@ describe('PhoneCat Application', function() {
     });
 
     // #docregion links
-    it('should render phone specific links', function() {
+    it('should render phone specific links', () => {
       let query = element(by.css('input'));
       query.sendKeys('nexus');
       element.all(by.css('.phones li a')).first().click();
-      browser.getCurrentUrl().then(function(url: string) {
+      browser.getCurrentUrl().then((url: string) => {
         expect(url.endsWith('/phones/nexus-s')).toBe(true);
       });
     });
@@ -75,23 +73,23 @@ describe('PhoneCat Application', function() {
 
   });
 
-  describe('View: Phone detail', function() {
+  describe('View: Phone detail', () => {
 
-    beforeEach(function() {
+    beforeEach(() => {
       browser.get('index.html#!/phones/nexus-s');
     });
 
-    it('should display the `nexus-s` page', function() {
+    it('should display the `nexus-s` page', () => {
       expect(element(by.css('h1')).getText()).toBe('Nexus S');
     });
 
-    it('should display the first phone image as the main phone image', function() {
+    it('should display the first phone image as the main phone image', () => {
       let mainImage = element(by.css('img.phone.selected'));
 
       expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
     });
 
-    it('should swap the main image when clicking on a thumbnail image', function() {
+    it('should swap the main image when clicking on a thumbnail image', () => {
       let mainImage = element(by.css('img.phone.selected'));
       let thumbnails = element.all(by.css('.phone-thumbs img'));
 

aio/content/examples/user-input/e2e/src/app.e2e-spec.ts

@@ -1,30 +1,30 @@
 import { browser, element, by, protractor } from 'protractor';
 
-describe('User Input Tests', function () {
+describe('User Input Tests', () => {
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should support the click event', function () {
+  it('should support the click event', () => {
     let mainEle = element(by.css('app-click-me'));
     let buttonEle = element(by.css('app-click-me button'));
     expect(mainEle.getText()).not.toContain('You are my hero!');
-    buttonEle.click().then(function() {
+    buttonEle.click().then(() => {
       expect(mainEle.getText()).toContain('You are my hero!');
     });
   });
 
-  it('should support the click event with an event payload', function () {
+  it('should support the click event with an event payload', () => {
     let mainEle = element(by.css('app-click-me2'));
     let buttonEle = element(by.css('app-click-me2 button'));
     expect(mainEle.getText()).not.toContain('Event target is ');
-    buttonEle.click().then(function() {
+    buttonEle.click().then(() => {
       expect(mainEle.getText()).toContain('Event target is BUTTON');
     });
   });
 
-  it('should support the keyup event ', function () {
+  it('should support the keyup event ', () => {
     let mainEle = element(by.css('app-key-up1'));
     let inputEle = mainEle.element(by.css('input'));
     let outputTextEle = mainEle.element(by.css('p'));
@@ -33,7 +33,7 @@ describe('User Input Tests', function () {
     expect(outputTextEle.getText()).toEqual('a | ab | abc |');
   });
 
-  it('should support user input from a local template let (loopback)', function () {
+  it('should support user input from a local template let (loopback)', () => {
     let mainEle = element(by.css('app-loop-back'));
     let inputEle = mainEle.element(by.css('input'));
     let outputTextEle = mainEle.element(by.css('p'));
@@ -42,7 +42,7 @@ describe('User Input Tests', function () {
     expect(outputTextEle.getText()).toEqual('abc');
   });
 
-  it('should be able to combine click event with a local template var', function () {
+  it('should be able to combine click event with a local template var', () => {
     let mainEle = element(by.css('app-key-up2'));
     let inputEle = mainEle.element(by.css('input'));
     let outputTextEle = mainEle.element(by.css('p'));
@@ -63,7 +63,7 @@ describe('User Input Tests', function () {
     expect(outputTextEle.getText()).toEqual('abc');
   });
 
-  it('should be able to filter blur events', function () {
+  it('should be able to filter blur events', () => {
     let prevInputEle = element(by.css('app-key-up3 input'));
     let mainEle = element(by.css('app-key-up4'));
     let inputEle = mainEle.element(by.css('input'));
@@ -72,23 +72,23 @@ describe('User Input Tests', function () {
     inputEle.sendKeys('abc');
     expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet');
     // change the focus
-    prevInputEle.click().then(function() {
+    prevInputEle.click().then(() => {
       expect(outputTextEle.getText()).toEqual('abc');
     });
   });
 
-  it('should be able to compose little tour of heroes', function () {
+  it('should be able to compose little tour of heroes', () => {
     let mainEle = element(by.css('app-little-tour'));
     let inputEle = mainEle.element(by.css('input'));
     let addButtonEle = mainEle.element(by.css('button'));
     let heroEles = mainEle.all(by.css('li'));
     let numHeroes: number;
     expect(heroEles.count()).toBeGreaterThan(0);
-    heroEles.count().then(function(count: number) {
+    heroEles.count().then((count: number) => {
       numHeroes = count;
       inputEle.sendKeys('abc');
       return addButtonEle.click();
-    }).then(function() {
+    }).then(() => {
       expect(heroEles.count()).toEqual(numHeroes + 1, 'should be one more hero added');
       expect(heroEles.get(numHeroes).getText()).toContain('abc');
     });