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/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>
-@Directive({selector: '[mySpy]'})
+// Usage: <div appSpy>...</div>
+@Directive({selector: '[appSpy]'})
 export class SpyDirective implements OnInit, OnDestroy {
 
   constructor(private logger: LoggerService) { }