"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