diff --git a/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts b/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
index 1e59a89204..63cb0ba0ff 100644
--- a/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
+++ b/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: `
@@ -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);
diff --git a/aio/content/examples/dynamic-component-loader/src/app/app.component.ts b/aio/content/examples/dynamic-component-loader/src/app/app.component.ts
index 40fe96a276..1a5fa94dbc 100644
--- a/aio/content/examples/dynamic-component-loader/src/app/app.component.ts
+++ b/aio/content/examples/dynamic-component-loader/src/app/app.component.ts
@@ -8,7 +8,7 @@ import { AdItem } from './ad-item';
selector: 'app-root',
template: `
`
})
diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md
index ecd6fe0a24..c2e3d77748 100644
--- a/aio/content/guide/dynamic-component-loader.md
+++ b/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.