refactor(docs-infra): fix docs examples for Angular-specific tslint rules (angular#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 angular#38143

Author: gkalpak

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:*/
+/* tslint:disable: no-unused-variable component-selector one-line space-before-function-paren */
 // #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
-// #docregion provide-parent
+// #enddocregion provide-the-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:use-output-property-decorator */
-
-/* tslint:disable:no-input-rename */
-
-
+// tslint:disable: no-input-rename no-output-rename use-input-property-decorator use-output-property-decorator
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({