Dynamic AdButler component

src/app/app.module.ts

@@ -580,7 +580,8 @@ if (environment.production) {
     NavigationDialogComponent,
     ScreenshotDialogComponent,
     ConfirmationBottomSheetComponent,
-    ConfigDialogComponent
+    ConfigDialogComponent,
+    AdbutlerComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/components/adbutler/adbutler.component.ts

@@ -11,13 +11,12 @@ import { ToasterService } from '../../services/toaster.service';
 })
 export class AdbutlerComponent implements OnInit {
   @ViewChild('ad', {static: false}) ad: ElementRef;
-  @Input() theme: string;
-  @Output() onLoad = new EventEmitter();
+  theme: string;
+  onLoad = new EventEmitter();
   htmlCode: string;
 
   constructor(
-    private httpClient: HttpClient,
-    private toasterService: ToasterService
+    private httpClient: HttpClient
   ) {}
 
   ngOnInit() {

src/app/components/notification-box/notification-box.component.html

@@ -2,7 +2,7 @@
     <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
     <div style="display: flex; height: 102px;">
         <div class="content" [ngClass]="{lightTheme: isLightThemeEnabled}">
-            <app-adbutler (onLoad)="onLoadingAdbutler($event)" theme="dark"></app-adbutler>
+            <template #dynamicComponentContainer></template>
             <mat-icon (click)="closeNotification()" class="close-button">close</mat-icon>
         </div>
     </div>

src/app/components/notification-box/notification-box.component.ts

@@ -1,6 +1,7 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ComponentFactoryResolver, ViewContainerRef, ViewChild } from '@angular/core';
 import { timer, Observable, Subscription } from 'rxjs';
 import { ThemeService } from '../../services/theme.service';
+import { AdbutlerComponent } from '../adbutler/adbutler.component';
 
 @Component({
     selector: 'app-notification-box',
@@ -8,6 +9,8 @@ import { ThemeService } from '../../services/theme.service';
     styleUrls: ['./notification-box.component.scss']
 })
 export class NotificationBoxComponent implements OnInit, OnDestroy {
+    @ViewChild('dynamicComponentContainer', {read: ViewContainerRef, static: false}) dynamicComponentContainer;
+
     timer: Observable<number>;
     viewTimer: Observable<number>;
     timerSubscription: Subscription;
@@ -26,7 +29,9 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
     isLightThemeEnabled: boolean = false;
 
     constructor(
-        private themeService: ThemeService
+        private themeService: ThemeService,
+        private componentFactoryResolver: ComponentFactoryResolver,
+        private viewContainerRef: ViewContainerRef
     ){}
 
     ngOnInit() {
@@ -34,6 +39,20 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
         this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
     }
 
+    ngAfterViewInit() {
+        this.createDynamicAdComponent();
+    }
+
+    createDynamicAdComponent() : void {
+        const factory = this.componentFactoryResolver.resolveComponentFactory(AdbutlerComponent);
+        const componentRef = this.dynamicComponentContainer.createComponent(factory);
+        componentRef.instance.theme = this.themeService.getActualTheme() === 'light';
+        componentRef.instance.onLoad.subscribe(event => {
+            this.onLoadingAdbutler(event);
+        })
+        componentRef.changeDetectorRef.detectChanges();
+    }
+
     startTimer() {
         this.timer = timer(this.delayTime, 1000);