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.