refactor(docs-infra): fix docs examples for Angular-specific tslint rules (#38143)

This commit updates the docs examples to be compatible with the
following Angular-specific tslint rules:
- `component-selector`
- `directive-selector`
- `no-conflicting-lifecycle`
- `no-host-metadata-property`
- `no-input-rename`
- `no-output-native`
- `no-output-rename`

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

@@ -1,3 +1,4 @@
+// tslint:disable: no-host-metadata-property
 // #docregion progressbar-component
 import { Component, Input } from '@angular/core';
 

aio/content/examples/attribute-binding/src/app/comp-with-host-binding.component.ts

@@ -1,16 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'comp-with-host-binding',
   template: 'I am a component!',
-  host: {
-    '[class.special]': 'isSpecial',
-    '[style.color]': 'color',
-    '[style.width]': 'width'
-  }
 })
 export class CompWithHostBindingComponent {
+  @HostBinding('class.special')
   isSpecial = false;
+
+  @HostBinding('style.color')
   color = 'green';
+
+  @HostBinding('style.width')
   width = '200px';
 }

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

@@ -12,6 +12,6 @@ import { Hero } from './hero';
 })
 export class HeroChildComponent {
   @Input() hero: Hero;
-  @Input('master') masterName: string;
+  @Input('master') masterName: string; // tslint:disable-line: no-input-rename
 }
 // #enddocregion

aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts

@@ -1,5 +1,4 @@
-/* tslint:disable: no-unused-variable component-selector-name one-line space-before-function-paren */
+/* tslint:disable: no-unused-variable component-selector one-line space-before-function-paren */
-/* tslint:disable:*/
 // #docplaster
 // #docregion
 import { Component, forwardRef, Optional, SkipSelf } from '@angular/core';
@@ -20,8 +19,7 @@ const DifferentParent = Parent;
 // The `parentType` defaults to `Parent` when omitting the second parameter.
 // #docregion provide-the-parent
 export function provideParent
-// #enddocregion provide-parent, provide-the-parent
+// #enddocregion provide-the-parent
-// #docregion provide-parent
   (component: any, parentType?: any) {
     return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
   }

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

@@ -11,7 +11,7 @@ import { AdComponent } from './ad.component';
   template: `
               <div class="ad-banner-example">
                 <h3>Advertisements</h3>
-                <ng-template ad-host></ng-template>
+                <ng-template adHost></ng-template>
               </div>
             `
   // #enddocregion ad-host

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

@@ -1,8 +1,9 @@
+// tslint:disable: directive-selector
 // #docregion
 import { Directive, ViewContainerRef } from '@angular/core';
 
 @Directive({
-  selector: '[ad-host]',
+  selector: '[adHost]',
 })
 export class AdDirective {
   constructor(public viewContainerRef: ViewContainerRef) { }

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

@@ -1,6 +1,6 @@
 // tslint:disable: variable-name
 // #docregion
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 
 @Component({
@@ -9,9 +9,6 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
     <span>Popup: {{message}}</span>
     <button (click)="closed.next()">&#x2716;</button>
   `,
-  host: {
-    '[@state]': 'state',
-  },
   animations: [
     trigger('state', [
       state('opened', style({transform: 'translateY(0%)'})),
@@ -41,6 +38,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
   `]
 })
 export class PopupComponent {
+  @HostBinding('@state')
   state: 'opened' | 'closed' = 'closed';
 
   @Input()

aio/content/examples/event-binding/src/app/click.directive.ts

@@ -1,4 +1,4 @@
-/* tslint:disable use-output-property-decorator directive-class-suffix */
+// tslint:disable: directive-selector
 import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
 
 @Directive({selector: '[myClick]'})

aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts

@@ -1,3 +1,4 @@
+// tslint:disable: no-output-native
 // #docregion
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { HeroTaxReturn } from './hero';

aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts

@@ -1,9 +1,4 @@
-/* tslint:disable:use-input-property-decorator */
+// tslint:disable: no-input-rename no-output-rename use-input-property-decorator use-output-property-decorator
-/* tslint:disable:use-output-property-decorator */
-
-/* tslint:disable:no-input-rename */
-
-
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({

aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts

@@ -135,7 +135,7 @@ describe('Lifecycle hooks', () => {
     const inputEle = element(by.css('spy-parent input'));
     const addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero'));
     const resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes'));
-    const heroEles = element.all(by.css('spy-parent div[mySpy'));
+    const heroEles = element.all(by.css('spy-parent div[appSpy'));
     const logEles = element.all(by.css('spy-parent h4 ~ div'));
 
     expect(heroEles.count()).toBe(2, 'should have two heroes displayed');

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

@@ -13,7 +13,7 @@ import { LoggerService } from './logger.service';
     Counter = {{counter}}
 
     <h5>-- Counter Change Log --</h5>
-    <div *ngFor="let chg of changeLog" mySpy>{{chg}}</div>
+    <div *ngFor="let chg of changeLog" appSpy>{{chg}}</div>
   </div>
   `,
   styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}']

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

@@ -1,3 +1,5 @@
+// tslint:disable: no-conflicting-lifecycle
+// #docregion
 import {
   AfterContentChecked,
   AfterContentInit,

aio/content/examples/lifecycle-hooks/src/app/spy.component.html

@@ -7,7 +7,7 @@
 
   <p></p>
   <!-- #docregion template -->
-  <div *ngFor="let hero of heroes" mySpy class="heroes">
+  <div *ngFor="let hero of heroes" appSpy class="heroes">
     {{hero}}
   </div>
   <!-- #enddocregion template -->

aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts

@@ -7,8 +7,8 @@ let nextId = 1;
 
 // #docregion spy-directive
 // Spy on any element to which it is applied.
-// Usage: <div mySpy>...</div>
+// Usage: <div appSpy>...</div>
-@Directive({selector: '[mySpy]'})
+@Directive({selector: '[appSpy]'})
 export class SpyDirective implements OnInit, OnDestroy {
 
   constructor(private logger: LoggerService) { }

aio/content/examples/observables-in-angular/src/main.ts

@@ -1,11 +1,12 @@
-
+// tslint:disable: no-output-native
+// #docregion
 import { Component, Output, OnInit, EventEmitter, NgModule } from '@angular/core';
 import { Observable } from 'rxjs';
 
 // #docregion eventemitter
 
 @Component({
-  selector: 'zippy',
+  selector: 'app-zippy',
   template: `
     <div class="zippy">
       <div (click)="toggle()">Toggle</div>

aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts

@@ -1,3 +1,4 @@
+// tslint:disable: directive-selector
 // #docregion
 import { Directive, ElementRef } from '@angular/core';
 

aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts

@@ -1,3 +1,4 @@
+// tslint:disable: directive-selector
 // #docregion
 import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
 

aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts

@@ -1,3 +1,4 @@
+// tslint:disable: no-host-metadata-property
 // #docregion
 import { Directive } from '@angular/core';
 

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

@@ -1,4 +1,4 @@
-/* tslint:disable:forin */
+// tslint:disable: directive-selector forin no-input-rename
 import { Component, ContentChildren, Directive, EventEmitter,
          Injectable, Input, Output, Optional,
          HostBinding, HostListener,

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

@@ -1,3 +1,4 @@
+// tslint:disable: directive-selector
 // #docregion
 import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
 

aio/content/examples/testing/src/testing/router-link-directive-stub.ts

@@ -3,7 +3,7 @@ import { Directive, Input, HostListener } from '@angular/core';
 // export for convenience.
 export { RouterLink} from '@angular/router';
 
-/* tslint:disable:directive-class-suffix */
+// tslint:disable: directive-class-suffix directive-selector
 // #docregion router-link
 @Directive({
   selector: '[routerLink]'

aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts

@@ -1,3 +1,4 @@
+// tslint:disable: directive-selector
 // #docregion
 export const heroDetail = {
   bindings: {

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

@@ -1,3 +1,4 @@
+// tslint:disable: directive-selector
 // #docregion
 // #docregion hero-detail-io
 export const heroDetail = {

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

@@ -1,3 +1,4 @@
+// tslint:disable: directive-selector
 // #docregion
 // #docregion hero-detail
 export const heroDetail = {

aio/content/guide/dynamic-component-loader.md

@@ -42,7 +42,7 @@ mark valid insertion points in the template.
 `AdDirective` injects `ViewContainerRef` to gain access to the view
 container of the element that will host the dynamically added component.
 
-In the `@Directive` decorator, notice the selector name, `ad-host`;
+In the `@Directive` decorator, notice the selector name, `adHost`;
 that's what you use to apply the directive to the element.
 The next section shows you how.
 
@@ -56,7 +56,7 @@ decorator's `template` property as a template string.
 
 The `<ng-template>` element is where you apply the directive you just made.
 To apply the `AdDirective`, recall the selector from `ad.directive.ts`,
-`ad-host`. Apply that to `<ng-template>` without the square brackets. Now Angular knows
+`[adHost]`. Apply that to `<ng-template>` without the square brackets. Now Angular knows
 where to dynamically load components.
 
 

aio/content/guide/observables-in-angular.md

@@ -14,7 +14,7 @@ When you call `emit()`, it passes the emitted value to the `next()` method of an
 
 A good example of usage can be found in the [EventEmitter](api/core/EventEmitter) documentation. Here is the example component that listens for open and close events:
 
-`<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>`
+`<app-zippy (open)="onOpen($event)" (close)="onClose($event)"></app-zippy>`
 
 Here is the component definition: