docs: fix dynamic component loader example (angular#22181)

	closes angular#21903

PR Close angular#22181

Author: kapunahelewong

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

@@ -1,12 +1,12 @@
 // #docregion
-import { Component, Input, AfterViewInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
 
 import { AdDirective } from './ad.directive';
 import { AdItem }      from './ad-item';
 import { AdComponent } from './ad.component';
 
 @Component({
-  selector: 'app-add-banner',
+  selector: 'app-ad-banner',
   // #docregion ad-host
   template: `
               <div class="ad-banner">
@@ -17,16 +17,15 @@ import { AdComponent } from './ad.component';
   // #enddocregion ad-host
 })
 // #docregion class
-export class AdBannerComponent implements AfterViewInit, OnDestroy {
+export class AdBannerComponent implements OnInit, OnDestroy {
   @Input() ads: AdItem[];
-  currentAddIndex: number = -1;
+  currentAdIndex: number = -1;
   @ViewChild(AdDirective) adHost: AdDirective;
-  subscription: any;
   interval: any;
 
   constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
 
-  ngAfterViewInit() {
+  ngOnInit() {
     this.loadComponent();
     this.getAds();
   }
@@ -36,8 +35,8 @@ export class AdBannerComponent implements AfterViewInit, OnDestroy {
   }
 
   loadComponent() {
-    this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length;
-    let adItem = this.ads[this.currentAddIndex];
+    this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
+    let adItem = this.ads[this.currentAdIndex];
 
     let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
 

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

@@ -8,7 +8,7 @@ import { AdItem }            from './ad-item';
   selector: 'app-root',
   template: `
     <div>
-      <app-add-banner [ads]="ads"></app-add-banner>
+      <app-ad-banner [ads]="ads"></app-ad-banner>
     </div>
   `
 })

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

@@ -109,9 +109,9 @@ Take it step by step. First, it picks an ad.
 
 The `loadComponent()` method chooses an ad using some math.
 
-First, it sets the `currentAddIndex` by taking whatever it
+First, it sets the `currentAdIndex` by taking whatever it
 currently is plus one, dividing that by the length of the `AdItem` array, and
-using the _remainder_ as the new `currentAddIndex` value. Then, it uses that
+using the _remainder_ as the new `currentAdIndex` value. Then, it uses that
 value to select an `adItem` from the array.