bfd13c06e1
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
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
// #docregion
|
|
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-ad-banner',
|
|
// #docregion ad-host
|
|
template: `
|
|
<div class="ad-banner-example">
|
|
<h3>Advertisements</h3>
|
|
<ng-template adHost></ng-template>
|
|
</div>
|
|
`
|
|
// #enddocregion ad-host
|
|
})
|
|
// #docregion class
|
|
export class AdBannerComponent implements OnInit, OnDestroy {
|
|
@Input() ads: AdItem[];
|
|
currentAdIndex = -1;
|
|
@ViewChild(AdDirective, {static: true}) adHost: AdDirective;
|
|
interval: any;
|
|
|
|
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
|
|
|
|
ngOnInit() {
|
|
this.loadComponent();
|
|
this.getAds();
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
clearInterval(this.interval);
|
|
}
|
|
|
|
loadComponent() {
|
|
this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
|
|
const adItem = this.ads[this.currentAdIndex];
|
|
|
|
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
|
|
|
|
const viewContainerRef = this.adHost.viewContainerRef;
|
|
viewContainerRef.clear();
|
|
|
|
const componentRef = viewContainerRef.createComponent<AdComponent>(componentFactory);
|
|
componentRef.instance.data = adItem.data;
|
|
}
|
|
|
|
getAds() {
|
|
this.interval = setInterval(() => {
|
|
this.loadComponent();
|
|
}, 3000);
|
|
}
|
|
}
|
|
// #enddocregion class
|