refactor(docs-infra): fix docs examples for tslint rules related to object properties (#38143)

This commit updates the docs examples to be compatible with the
`no-string-literal`, `object-literal-key-quotes` and
`object-literal-shorthand` tslint rules.

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/app.component.ts

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

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

@@ -46,9 +46,9 @@ export class AppComponent implements OnInit {
   setCurrentClasses() {
     // CSS classes: added/removed per current state of component properties
     this.currentClasses =  {
-      'saveable': this.canSave,
+      saveable: this.canSave,
-      'modified': !this.isUnchanged,
+      modified: !this.isUnchanged,
-      'special':  this.isSpecial
+      special:  this.isSpecial
     };
   }
   // #enddocregion setClasses
@@ -107,7 +107,7 @@ export class AppComponent implements OnInit {
   trackByItems(index: number, item: Item): number { return item.id; }
 // #enddocregion trackByItems
 
-  trackById(index: number, item: any): number { return item['id']; }
+  trackById(index: number, item: any): number { return item.id; }
 
 }
 

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

@@ -111,8 +111,8 @@ describe('Component Communication Cookbook Tests', () => {
       let logs = ul.all(by.tagName('li'));
 
       return {
-        label: label,
+        label,
-        logs: logs,
+        logs,
         count: logs.count()
       };
     }

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

@@ -49,6 +49,6 @@ if (!/e2e/.test(location.search)) {
   ],
   declarations: directives,
   bootstrap: [ AppComponent ],
-  schemas: schemas
+  schemas
 })
 export class AppModule { }

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

@@ -18,7 +18,7 @@ const template = '{{log}}';
 
 @Component({
   selector: 'provider-1',
-  template: template,
+  template,
   // #docregion providers-1, providers-logger
   providers: [Logger]
   // #enddocregion providers-1, providers-logger
@@ -35,7 +35,7 @@ export class Provider1Component {
 
 @Component({
   selector: 'provider-3',
-  template: template,
+  template,
   providers:
     // #docregion providers-3
     [{ provide: Logger, useClass: Logger }]
@@ -54,7 +54,7 @@ export class BetterLogger extends Logger {}
 
 @Component({
   selector: 'provider-4',
-  template: template,
+  template,
   providers:
     // #docregion providers-4
     [{ provide: Logger, useClass: BetterLogger }]
@@ -84,7 +84,7 @@ export class EvenBetterLogger extends Logger {
 
 @Component({
   selector: 'provider-5',
-  template: template,
+  template,
   providers:
     // #docregion providers-5
     [ UserService,
@@ -112,7 +112,7 @@ export class OldLogger {
 
 @Component({
   selector: 'provider-6a',
-  template: template,
+  template,
   providers:
     // #docregion providers-6a
     [ NewLogger,
@@ -135,7 +135,7 @@ export class Provider6aComponent {
 
 @Component({
   selector: 'provider-6b',
-  template: template,
+  template,
   providers:
     // #docregion providers-6b
     [ NewLogger,
@@ -168,7 +168,7 @@ export const SilentLogger = {
 
 @Component({
   selector: 'provider-7',
-  template: template,
+  template,
   providers:
     // #docregion providers-7
     [{ provide: Logger, useValue: SilentLogger }]
@@ -186,7 +186,7 @@ export class Provider7Component {
 
 @Component({
   selector: 'provider-8',
-  template: template,
+  template,
   providers: [heroServiceProvider, Logger, UserService]
 })
 export class Provider8Component {
@@ -202,7 +202,7 @@ export class Provider8Component {
 
 @Component({
   selector: 'provider-9',
-  template: template,
+  template,
   /*
    // #docregion providers-9-interface
    // FAIL! Can't use interface as provider token
@@ -241,7 +241,7 @@ let some_message = 'Hello from the injected logger';
 
 @Component({
   selector: 'provider-10',
-  template: template,
+  template,
   providers: [{ provide: Logger, useValue: null }]
 })
 export class Provider10Component implements OnInit {

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

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

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

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

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

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

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

@@ -54,7 +54,7 @@ function getPage(sectionTag: string) {
   let buttons = section.all(by.css('button'));
 
   page = {
-    section: section,
+    section,
     form: section.element(by.css('form')),
     title: section.element(by.css('h1')),
     nameInput: section.element(by.css('#name')),

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

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

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

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

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

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

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

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

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

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

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

@@ -48,9 +48,9 @@ export class HeroFormComponent {
   // Reveal in html:
   //   Name via form.controls = {{showFormControls(heroForm)}}
   showFormControls(form: any) {
-    return form && form.controls['name'] &&
+    return form && form.controls.name &&
     // #docregion form-controls
-    form.controls['name'].value; // Dr. IQ
+    form.controls.name.value; // Dr. IQ
     // #enddocregion form-controls
   }
 

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

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

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

@@ -16,7 +16,7 @@ import { HttpErrorHandler, HandleError } from '../http-error-handler.service';
 const httpOptions = {
   headers: new HttpHeaders({
     'Content-Type':  'application/json',
-    'Authorization': 'my-auth-token'
+    Authorization: 'my-auth-token'
   })
 };
 // #enddocregion http-options

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

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

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

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

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

@@ -73,7 +73,7 @@ describe('HttpClient testing', () => {
 
     // Make an HTTP GET request with specific header
     httpClient.get<Data>(testUrl, {
-        headers: new HttpHeaders({'Authorization': 'my-auth-token'})
+        headers: new HttpHeaders({Authorization: 'my-auth-token'})
       })
       .subscribe(data =>
         expect(data).toEqual(testData)

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

@@ -31,7 +31,7 @@ export class MyCounterComponent implements OnChanges {
     }
 
     // A change to `counter` is the only change we care about
-    let chng = changes['counter'];
+    let chng = changes.counter;
     let cur = chng.currentValue;
     let prev = JSON.stringify(chng.previousValue); // first time is {}; after is integer
     this.changeLog.push(`counter: currentValue = ${cur}, previousValue = ${prev}`);

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

@@ -57,7 +57,7 @@ export class PeekABooComponent extends PeekABooDirective implements
     let changesMsgs: string[] = [];
     for (let propName in changes) {
       if (propName === 'name') {
-        let name = changes['name'].currentValue;
+        let name = changes.name.currentValue;
         changesMsgs.push(`name ${this.verb} to "${name}"`);
       } else {
         changesMsgs.push(propName + ' ' + this.verb);

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

@@ -20,12 +20,12 @@ describe('Router', () => {
 
       crisisHref: hrefEles.get(0),
       crisisList: element.all(by.css('app-root > div > app-crisis-center > app-crisis-list li')),
-      crisisDetail: crisisDetail,
+      crisisDetail,
       crisisDetailTitle: crisisDetail.element(by.xpath('*[1]')),
 
       heroesHref: hrefEles.get(1),
       heroesList: element.all(by.css('app-root > div > app-hero-list li')),
-      heroDetail: heroDetail,
+      heroDetail,
       heroDetailTitle: heroDetail.element(by.xpath('*[2]')),
 
       adminHref: hrefEles.get(2),

aio/content/examples/router/src/app/app.component.2.ts

@@ -15,7 +15,7 @@ import { slideInAnimation } from './animations';
 // #docregion function-binding
 export class AppComponent {
   getAnimationData(outlet: RouterOutlet) {
-    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
+    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
   }
 }
 // #enddocregion function-binding

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

@@ -12,6 +12,6 @@ import { slideInAnimation } from './animations';
 })
 export class AppComponent {
   getAnimationData(outlet: RouterOutlet) {
-    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
+    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
   }
 }

aio/content/examples/router/src/app/auth/auth.guard.4.ts

@@ -39,7 +39,7 @@ export class AuthGuard implements CanActivate, CanActivateChild {
     // Set our navigation extras object
     // that contains our global query params and fragment
     let navigationExtras: NavigationExtras = {
-      queryParams: { 'session_id': sessionId },
+      queryParams: { session_id: sessionId },
       fragment: 'anchor'
     };
 

aio/content/examples/router/src/app/auth/auth.guard.ts

@@ -46,7 +46,7 @@ export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
     // Set our navigation extras object
     // that contains our global query params and fragment
     let navigationExtras: NavigationExtras = {
-      queryParams: { 'session_id': sessionId },
+      queryParams: { session_id: sessionId },
       fragment: 'anchor'
     };
 

aio/content/examples/router/src/app/selective-preloading-strategy.service.ts

@@ -10,7 +10,7 @@ export class SelectivePreloadingStrategyService implements PreloadingStrategy {
   preloadedModules: string[] = [];
 
   preload(route: Route, load: () => Observable<any>): Observable<any> {
-    if (route.data && route.data['preload']) {
+    if (route.data && route.data.preload) {
       // add the route path to the preloaded module array
       this.preloadedModules.push(route.path);
 

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

@@ -9,7 +9,7 @@ describe('Testing Example', () => {
     let navElts = element.all(by.css('app-root nav a'));
 
     return {
-      navElts: navElts,
+      navElts,
 
       appDashboard: element(by.css('app-root app-dashboard')),
     };

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

@@ -222,7 +222,7 @@ describe('demo (with TestBed):', () => {
       fixture.detectChanges();
       const ngForRow = fixture.debugElement.query(By.directive(IoComponent)); // first hero ngForRow
 
-      const hero = ngForRow.context['hero']; // the hero object passed into the row
+      const hero = ngForRow.context.hero; // the hero object passed into the row
       expect(hero.name).toBe(heroName, 'ngRow.context.hero');
 
       const rowComp = ngForRow.componentInstance;
@@ -514,11 +514,11 @@ describe('demo (with TestBed):', () => {
       expect(comp.children.toArray().length).toBe(4,
         'three different child components and an ElementRef with #content');
 
-      expect(el.references['nc']).toBe(comp, '#nc reference to component');
+      expect(el.references.nc).toBe(comp, '#nc reference to component');
 
       // #docregion custom-predicate
       // Filter for DebugElements with a #content reference
-      const contentRefs = el.queryAll( de => de.references['content']);
+      const contentRefs = el.queryAll( de => de.references.content);
       // #enddocregion custom-predicate
       expect(contentRefs.length).toBe(4, 'elements w/ a #content reference');
     });

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

@@ -72,7 +72,7 @@ describe('HttpClient testing', () => {
 
     // Make an HTTP GET request with specific header
     httpClient.get<Data>(testUrl, {
-        headers: new HttpHeaders({'Authorization': 'my-auth-token'})
+        headers: new HttpHeaders({Authorization: 'my-auth-token'})
       })
       .subscribe(data =>
         expect(data).toEqual(testData)

aio/content/examples/testing/src/app/shared/canvas.component.spec.ts

@@ -7,7 +7,7 @@ describe('CanvasComponent', () => {
   // #enddocregion without-toBlob-macrotask
   // #docregion enable-toBlob-macrotask
   beforeEach(() => {
-    window['__zone_symbol__FakeAsyncTestMacroTask'] = [
+    (window as any).__zone_symbol__FakeAsyncTestMacroTask = [
       {
         source: 'HTMLCanvasElement.toBlob',
         callbackArgs: [{ size: 200 }],

aio/content/examples/testing/src/app/shared/highlight.directive.spec.ts

@@ -69,7 +69,7 @@ describe('HighlightDirective', () => {
 
 
   it('bare <h2> should not have a customProperty', () => {
-    expect(bareH2.properties['customProperty']).toBeUndefined();
+    expect(bareH2.properties.customProperty).toBeUndefined();
   });
   // #enddocregion selected-tests
 

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

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

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

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

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

@@ -5,7 +5,7 @@
 
 export function addMatchers(): void {
   jasmine.addMatchers({
-    toHaveText: toHaveText
+    toHaveText
   });
 }
 

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

@@ -43,7 +43,7 @@ describe('Tutorial part 5', () => {
     let navElts = element.all(by.css('app-root nav a'));
 
     return {
-      navElts: navElts,
+      navElts,
 
       appDashboardHref: navElts.get(0),
       appDashboard: element(by.css('app-root app-dashboard')),

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

@@ -50,7 +50,7 @@ describe('Tutorial part 6', () => {
     let navElts = element.all(by.css('app-root nav a'));
 
     return {
-      navElts: navElts,
+      navElts,
 
       appDashboardHref: navElts.get(0),
       appDashboard: element(by.css('app-root app-dashboard')),

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

@@ -19,7 +19,7 @@ describe('phoneDetail', () => {
       $httpBackend = _$httpBackend_;
       $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData);
 
-      $routeParams['phoneId'] = 'xyz';
+      $routeParams.phoneId = 'xyz';
 
       ctrl = $componentController('phoneDetail');
     }));

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

@@ -5,7 +5,7 @@ class PhoneDetailController {
 
   static $inject = ['$routeParams', 'Phone'];
   constructor($routeParams: angular.route.IRouteParamsService, Phone: any) {
-    let phoneId = $routeParams['phoneId'];
+    let phoneId = $routeParams.phoneId;
     this.phone = Phone.get({phoneId}, (phone: any) => {
       this.setImage(phone.images[0]);
     });

aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts

@@ -8,7 +8,7 @@ class PhoneDetailController {
 
   static $inject = ['$routeParams', 'phone'];
   constructor($routeParams: angular.route.IRouteParamsService, phone: Phone) {
-    let phoneId = $routeParams['phoneId'];
+    let phoneId = $routeParams.phoneId;
     phone.get(phoneId).subscribe(data => {
       this.phone = data;
       this.setImage(data.images[0]);

aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts

@@ -42,7 +42,7 @@ describe('PhoneDetailComponent', () => {
       declarations: [ CheckmarkPipe, PhoneDetailComponent ],
       providers: [
         { provide: Phone, useClass: MockPhone },
-        { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) }
+        { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { phoneId: 1 } }) }
       ]
     })
     .compileComponents();

aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts

@@ -22,7 +22,7 @@ export class PhoneDetailComponent {
   mainImageUrl: string;
 
   constructor(routeParams: RouteParams, phone: Phone) {
-    phone.get(routeParams['phoneId']).subscribe(phone => {
+    phone.get(routeParams.phoneId).subscribe(phone => {
       this.phone = phone;
       this.setImage(phone.images[0]);
     });

aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts

@@ -42,7 +42,7 @@ describe('PhoneDetailComponent', () => {
       declarations: [ CheckmarkPipe, PhoneDetailComponent ],
       providers: [
         { provide: Phone, useClass: MockPhone },
-        { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) }
+        { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { phoneId: 1 } }) }
       ]
     })
     .compileComponents();