"Fossies" - the Fresh Open Source Software Archive 
Member "angular-13.3.10/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts" (25 May 2022, 1314 Bytes) of package /linux/www/angular-13.3.10.tar.gz:
As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) TypeScript source code syntax highlighting (style:
standard) with prefixed line numbers and
code folding option.
Alternatively you can here
view or
download the uninterpreted source code file.
1 // #docregion
2 import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
3
4 import { AdDirective } from './ad.directive';
5 import { AdItem } from './ad-item';
6 import { AdComponent } from './ad.component';
7
8 @Component({
9 selector: 'app-ad-banner',
10 // #docregion ad-host
11 template: `
12 <div class="ad-banner-example">
13 <h3>Advertisements</h3>
14 <ng-template adHost></ng-template>
15 </div>
16 `
17 // #enddocregion ad-host
18 })
19 // #docregion class
20 export class AdBannerComponent implements OnInit, OnDestroy {
21 @Input() ads: AdItem[] = [];
22
23 currentAdIndex = -1;
24
25 @ViewChild(AdDirective, {static: true}) adHost!: AdDirective;
26 interval: number|undefined;
27
28 ngOnInit(): void {
29 this.loadComponent();
30 this.getAds();
31 }
32
33 ngOnDestroy() {
34 clearInterval(this.interval);
35 }
36
37 loadComponent() {
38 this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
39 const adItem = this.ads[this.currentAdIndex];
40
41 const viewContainerRef = this.adHost.viewContainerRef;
42 viewContainerRef.clear();
43
44 const componentRef = viewContainerRef.createComponent<AdComponent>(adItem.component);
45 componentRef.instance.data = adItem.data;
46 }
47
48 getAds() {
49 this.interval = setInterval(() => {
50 this.loadComponent();
51 }, 3000);
52 }
53 }
54 // #enddocregion class