refactor(docs-infra): fix docs examples for tslint rules related to underscores in variable names (#38143)

This commit updates the docs examples to be compatible with the
`variable-name` tslint rule without requiring the
`allow-leading-underscore` and `allow-trailing-underscore` options.

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/animations/src/app/hero-list-page.component.ts

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

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

@@ -86,13 +86,11 @@ function getPageElts() {
 
 async function heroFromDetail(detail: ElementFinder): Promise<Hero> {
   // Get hero id from the first <div>
-  // let _id = await detail.all(by.css('div')).first().getText();
+  let id = await detail.all(by.css('div')).first().getText();
-  let _id = await detail.all(by.css('div')).first().getText();
   // Get name from the h2
-  // let _name = await detail.element(by.css('h4')).getText();
+  let name = await detail.element(by.css('h4')).getText();
-  let _name = await detail.element(by.css('h4')).getText();
   return {
-    id: +_id.substr(_id.indexOf(' ') + 1),
+    id: +id.substr(id.indexOf(' ') + 1),
-    name: _name.substr(0, _name.lastIndexOf(' '))
+    name: name.substr(0, name.lastIndexOf(' ')),
   };
 }

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

@@ -2,14 +2,14 @@ import { browser, element, by } from 'protractor';
 
 describe('Attribute directives', () => {
 
-  let _title = 'My First Attribute Directive';
+  let title = 'My First Attribute Directive';
 
   beforeAll(() => {
     browser.get('');
   });
 
-  it(`should display correct title: ${_title}`, () => {
+  it(`should display correct title: ${title}`, () => {
-    expect(element(by.css('h1')).getText()).toEqual(_title);
+    expect(element(by.css('h1')).getText()).toEqual(title);
   });
 
   it('should be able to select green highlight', () => {

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

@@ -11,18 +11,18 @@ describe('Component Communication Cookbook Tests', () => {
   describe('Parent-to-child communication', () => {
     // #docregion parent-to-child
     // ...
-    let _heroNames = ['Dr IQ', 'Magneta', 'Bombasto'];
+    let heroNames = ['Dr IQ', 'Magneta', 'Bombasto'];
-    let _masterName = 'Master';
+    let masterName = 'Master';
 
     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'));
 
-      for (let i = 0; i < _heroNames.length; i++) {
+      for (let i = 0; i < heroNames.length; i++) {
         let childTitle = heroes.get(i).element(by.tagName('h3')).getText();
         let childDetail = heroes.get(i).element(by.tagName('p')).getText();
-        expect(childTitle).toEqual(_heroNames[i] + ' says:');
+        expect(childTitle).toEqual(heroNames[i] + ' says:');
-        expect(childDetail).toContain(_masterName);
+        expect(childDetail).toContain(masterName);
       }
     });
     // ...
@@ -33,23 +33,23 @@ describe('Component Communication Cookbook Tests', () => {
     // #docregion parent-to-child-setter
     // ...
     it('should display trimmed, non-empty names', () => {
-      let _nonEmptyNameIndex = 0;
+      let nonEmptyNameIndex = 0;
-      let _nonEmptyName = '"Dr IQ"';
+      let nonEmptyName = '"Dr IQ"';
       let parent = element.all(by.tagName('app-name-parent')).get(0);
-      let hero = parent.all(by.tagName('app-name-child')).get(_nonEmptyNameIndex);
+      let hero = parent.all(by.tagName('app-name-child')).get(nonEmptyNameIndex);
 
       let displayName = hero.element(by.tagName('h3')).getText();
-      expect(displayName).toEqual(_nonEmptyName);
+      expect(displayName).toEqual(nonEmptyName);
     });
 
     it('should replace empty name with default name', () => {
-      let _emptyNameIndex = 1;
+      let emptyNameIndex = 1;
-      let _defaultName = '"<no name set>"';
+      let defaultName = '"<no name set>"';
       let parent = element.all(by.tagName('app-name-parent')).get(0);
-      let hero = parent.all(by.tagName('app-name-child')).get(_emptyNameIndex);
+      let hero = parent.all(by.tagName('app-name-child')).get(emptyNameIndex);
 
       let displayName = hero.element(by.tagName('h3')).getText();
-      expect(displayName).toEqual(_defaultName);
+      expect(displayName).toEqual(defaultName);
     });
     // ...
     // #enddocregion parent-to-child-setter
@@ -214,13 +214,13 @@ describe('Component Communication Cookbook Tests', () => {
     });
 
     function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) {
-      let _confirmedLog = ' confirmed the mission';
+      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(() => {
         let history = missionControl.all(by.tagName('li'));
         expect(history.count()).toBe(expectedLogCount);
-        expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + _confirmedLog);
+        expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + confirmedLog);
       });
     }
     // ...

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

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

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

@@ -1,19 +1,19 @@
 import { browser, element, by } from 'protractor';
 
 describe('Displaying Data Tests', () => {
-  let _title = 'Tour of Heroes';
+  let title = 'Tour of Heroes';
-  let _defaultHero = 'Windstorm';
+  let defaultHero = 'Windstorm';
 
   beforeAll(() => {
     browser.get('');
   });
 
-  it('should display correct title: ' + _title, () => {
+  it('should display correct title: ' + title, () => {
-    expect(element(by.css('h1')).getText()).toEqual(_title);
+    expect(element(by.css('h1')).getText()).toEqual(title);
   });
 
-  it('should have correct default hero:  ' + _defaultHero, () => {
+  it('should have correct default hero:  ' + defaultHero, () => {
-    expect(element(by.css('h2')).getText()).toContain(_defaultHero);
+    expect(element(by.css('h2')).getText()).toContain(defaultHero);
   });
 
   it('should have heroes', () => {

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', () => {
-  let _title = 'Authors Style Guide Sample';
+  let title = 'Authors Style Guide Sample';
 
   beforeAll(() => {
     browser.get('');
   });
 
-  it('should display correct title: ' + _title, () => {
+  it('should display correct title: ' + title, () => {
-    expect(element(by.css('h1')).getText()).toEqual(_title);
+    expect(element(by.css('h1')).getText()).toEqual(title);
   });
 });

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

@@ -1,3 +1,5 @@
+// tslint:disable: variable-name
+// #docregion
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 
@@ -42,12 +44,12 @@ export class PopupComponent {
   state: 'opened' | 'closed' = 'closed';
 
   @Input()
+  get message(): string { return this._message; }
   set message(message: string) {
     this._message = message;
     this.state = 'opened';
   }
-  get message(): string { return this._message; }
+  private _message: string;
-  _message: string;
 
   @Output()
   closed = new EventEmitter();

aio/content/examples/ngmodules/src/app/greeting/user.service.ts

@@ -12,7 +12,6 @@ export class UserServiceConfig {
 })
 export class UserService {
   id = nextId++;
-  private _userName = 'Sherlock Holmes';
 
   // #docregion ctor
   constructor(@Optional() config?: UserServiceConfig) {
@@ -25,4 +24,5 @@ export class UserService {
     const suffix = this.id > 1 ? ` times ${this.id}` : '';
     return this._userName + suffix;
   }
+  private _userName = 'Sherlock Holmes';  // tslint:disable-line: variable-name
 }

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts

@@ -2,9 +2,9 @@ import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
 
 // Just return the tree
-export function ngAdd(_options: any): Rule {
+export function ngAdd(options: any): Rule {
-  return (tree: Tree, _context: SchematicContext) => {
+  return (tree: Tree, context: SchematicContext) => {
-    _context.addTask(new NodePackageInstallTask());
+    context.addTask(new NodePackageInstallTask());
     return tree;
   };
 }

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

@@ -10,11 +10,8 @@ import { NgForm } from '@angular/forms';
 export class AppComponent {
   @ViewChild('itemForm') form: NgForm;
 
-  private _submitMessage = '';
+  get submitMessage() { return this._submitMessage; }
-
+  private _submitMessage = '';  // tslint:disable-line: variable-name
-  get submitMessage() {
-    return this._submitMessage;
-  }
 
   onSubmit(form: NgForm) {
     this._submitMessage = 'Submitted. Form value is ' + JSON.stringify(form.value);

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

@@ -12,12 +12,12 @@ class Hero {
   // Get hero id and name from the given detail element.
   static async fromDetail(detail: ElementFinder): Promise<Hero> {
     // Get hero id from the first <div>
-    let _id = await detail.all(by.css('div')).first().getText();
+    let id = await detail.all(by.css('div')).first().getText();
     // Get name from the h2
-    let _name = await detail.element(by.css('h2')).getText();
+    let name = await detail.element(by.css('h2')).getText();
     return {
-      id: +_id.substr(_id.indexOf(' ') + 1),
+      id: +id.substr(id.indexOf(' ') + 1),
-      name: _name.substr(0, _name.lastIndexOf(' '))
+      name: name.substr(0, name.lastIndexOf(' '))
     };
   }
 }

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

@@ -24,12 +24,12 @@ class Hero {
     // Get hero id and name from the given detail element.
     static async fromDetail(detail: ElementFinder): Promise<Hero> {
         // Get hero id from the first <div>
-        let _id = await detail.all(by.css('div')).first().getText();
+        let id = await detail.all(by.css('div')).first().getText();
         // Get name from the h2
-        let _name = await detail.element(by.css('h2')).getText();
+        let name = await detail.element(by.css('h2')).getText();
         return {
-            id: +_id.substr(_id.indexOf(' ') + 1),
+            id: +id.substr(id.indexOf(' ') + 1),
-            name: _name.substr(0, _name.lastIndexOf(' '))
+            name: name.substr(0, name.lastIndexOf(' '))
         };
     }
 }

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

@@ -24,12 +24,12 @@ class Hero {
     // Get hero id and name from the given detail element.
     static async fromDetail(detail: ElementFinder): Promise<Hero> {
         // Get hero id from the first <div>
-        let _id = await detail.all(by.css('div')).first().getText();
+        let id = await detail.all(by.css('div')).first().getText();
         // Get name from the h2
-        let _name = await detail.element(by.css('h2')).getText();
+        let name = await detail.element(by.css('h2')).getText();
         return {
-            id: +_id.substr(_id.indexOf(' ') + 1),
+            id: +id.substr(id.indexOf(' ') + 1),
-            name: _name.substr(0, _name.lastIndexOf(' '))
+            name: name.substr(0, name.lastIndexOf(' '))
         };
     }
 }

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

@@ -24,12 +24,12 @@ class Hero {
     // Get hero id and name from the given detail element.
     static async fromDetail(detail: ElementFinder): Promise<Hero> {
         // Get hero id from the first <div>
-        let _id = await detail.all(by.css('div')).first().getText();
+        let id = await detail.all(by.css('div')).first().getText();
         // Get name from the h2
-        let _name = await detail.element(by.css('h2')).getText();
+        let name = await detail.element(by.css('h2')).getText();
         return {
-            id: +_id.substr(_id.indexOf(' ') + 1),
+            id: +id.substr(id.indexOf(' ') + 1),
-            name: _name.substr(0, _name.lastIndexOf(' '))
+            name: name.substr(0, name.lastIndexOf(' '))
         };
     }
 }

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

@@ -25,12 +25,12 @@ class Hero {
     // Get hero id and name from the given detail element.
     static async fromDetail(detail: ElementFinder): Promise<Hero> {
         // Get hero id from the first <div>
-        let _id = await detail.all(by.css('div')).first().getText();
+        let id = await detail.all(by.css('div')).first().getText();
         // Get name from the h2
-        let _name = await detail.element(by.css('h2')).getText();
+        let name = await detail.element(by.css('h2')).getText();
         return {
-            id: +_id.substr(_id.indexOf(' ') + 1),
+            id: +id.substr(id.indexOf(' ') + 1),
-            name: _name.substr(0, _name.lastIndexOf(' '))
+            name: name.substr(0, name.lastIndexOf(' '))
         };
     }
 }

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

@@ -32,12 +32,12 @@ class Hero {
   // Hero id and name from the given detail element.
   static async fromDetail(detail: ElementFinder): Promise<Hero> {
     // Get hero id from the first <div>
-    let _id = await detail.all(by.css('div')).first().getText();
+    let id = await detail.all(by.css('div')).first().getText();
     // Get name from the h2
-    let _name = await detail.element(by.css('h2')).getText();
+    let name = await detail.element(by.css('h2')).getText();
     return {
-        id: +_id.substr(_id.indexOf(' ') + 1),
+        id: +id.substr(id.indexOf(' ') + 1),
-        name: _name.substr(0, _name.lastIndexOf(' '))
+        name: name.substr(0, name.lastIndexOf(' '))
     };
   }
 }

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

@@ -1,3 +1,4 @@
+// tslint:disable: variable-name
 describe('Phone', () => {
   let $httpBackend: angular.IHttpBackendService;
   let Phone: any;

aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts

@@ -1,3 +1,4 @@
+// tslint:disable: variable-name
 // #docregion
 describe('phoneDetail', () => {
 

aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts

@@ -1,3 +1,4 @@
+// tslint:disable: variable-name
 describe('phoneList', () => {
 
   // Load the module that contains the `phoneList` component before each test

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

@@ -1,3 +1,4 @@
+// tslint:disable: variable-name
 // #docregion
 import { inject, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

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

@@ -1,3 +1,4 @@
+// tslint:disable: variable-name
 import { inject, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { Phone, PhoneData } from './phone.service';