refactor(docs-infra): fix docs examples for tslint rule `no-angle-bracket-type-assertion` (#38143)

This commit updates the docs examples to be compatible with the
`no-angle-bracket-type-assertion` 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/binding-syntax/src/app/app.component.ts

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

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

@@ -43,8 +43,8 @@ export class AdBannerComponent implements OnInit, OnDestroy {
     const viewContainerRef = this.adHost.viewContainerRef;
     viewContainerRef.clear();
 
-    const componentRef = viewContainerRef.createComponent(componentFactory);
+    const componentRef = viewContainerRef.createComponent<AdComponent>(componentFactory);
-    (<AdComponent>componentRef.instance).data = adItem.data;
+    componentRef.instance.data = adItem.data;
   }
 
   getAds() {

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

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

aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts

@@ -15,10 +15,10 @@ export class SpinnerService {
   constructor() { }
 
   show() {
-    this.spinnerSubject.next(<SpinnerState>{ show: true });
+    this.spinnerSubject.next({ show: true });
   }
 
   hide() {
-    this.spinnerSubject.next(<SpinnerState>{ show: false });
+    this.spinnerSubject.next({ show: false });
   }
 }

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

@@ -256,7 +256,7 @@ describe('demo (with TestBed):', () => {
       fixture.detectChanges();
 
       const comp = fixture.componentInstance;
-      const input = <HTMLInputElement> fixture.debugElement.query(By.css('input')).nativeElement;
+      const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
 
       expect(comp.name).toBe(expectedOrigName,
         `At start name should be ${expectedOrigName} `);
@@ -294,7 +294,7 @@ describe('demo (with TestBed):', () => {
       fixture.detectChanges();
 
       const comp =  fixture.componentInstance;
-      const input = <HTMLInputElement> fixture.debugElement.query(By.css('input')).nativeElement;
+      const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
 
       expect(comp.name).toBe(expectedOrigName,
         `At start name should be ${expectedOrigName} `);

aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts

@@ -21,7 +21,7 @@ describe('HeroDetailComponent - no TestBed', () => {
     hds.getHero.and.returnValue(asyncData(expectedHero));
     hds.saveHero.and.returnValue(asyncData(expectedHero));
 
-    comp = new HeroDetailComponent(hds, <any> activatedRoute, router);
+    comp = new HeroDetailComponent(hds, activatedRoute as any, router);
     comp.ngOnInit();
 
     // OnInit calls HDS.getHero; wait for it to get the fake hero

aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts

@@ -358,7 +358,7 @@ class Page {
 
   constructor(fixture: ComponentFixture<HeroDetailComponent>) {
     // get the navigate spy from the injected router spy object
-    const routerSpy = <any> fixture.debugElement.injector.get(Router);
+    const routerSpy = someFixture.debugElement.injector.get(Router) as any;
     this.navigateSpy = routerSpy.navigate;
 
     // spy on component's `gotoList()` method

aio/content/examples/testing/src/app/model/hero.service.spec.ts

@@ -17,7 +17,7 @@ describe ('HeroesService (with spies)', () => {
   beforeEach(() => {
     // TODO: spy on other methods too
     httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
-    heroService = new HeroService(<any> httpClientSpy);
+    heroService = new HeroService(httpClientSpy as any);
   });
 
   it('should return expected heroes (HttpClient called once)', () => {

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

@@ -301,5 +301,5 @@ function getHeroLiEltById(id: number): ElementFinder {
 async function toHeroArray(allHeroes: ElementArrayFinder): Promise<Hero[]> {
   let promisedHeroes = await allHeroes.map(Hero.fromLi);
   // The cast is necessary to get around issuing with the signature of Promise.all()
-  return <Promise<any>> Promise.all(promisedHeroes);
+  return Promise.all(promisedHeroes) as Promise<any>;
 }