feat(theme-shared): append the confirmation and toast-container components to body

#3530

npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html

@@ -155,9 +155,6 @@
   <router-outlet #outlet="outlet"></router-outlet>
 </div>
 
-<abp-confirmation></abp-confirmation>
-<abp-toast-container right="30px" bottom="30px"></abp-toast-container>
-
 <ng-template #appName>
   {{ appInfo.name }}
 </ng-template>

npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts

@@ -1,14 +1,29 @@
-import { Injectable } from '@angular/core';
+import { Injectable, ComponentRef } from '@angular/core';
 import { Confirmation } from '../models/confirmation';
 import { fromEvent, Observable, Subject, ReplaySubject } from 'rxjs';
 import { takeUntil, debounceTime, filter } from 'rxjs/operators';
-import { Config } from '@abp/ng.core';
+import { Config, ContentProjectionService, PROJECTION_STRATEGY } from '@abp/ng.core';
+import { ConfirmationComponent } from '../components/confirmation/confirmation.component';
 
 @Injectable({ providedIn: 'root' })
 export class ConfirmationService {
   status$: Subject<Confirmation.Status>;
   confirmation$ = new ReplaySubject<Confirmation.DialogData>(1);
 
+  private containerComponentRef: ComponentRef<ConfirmationComponent>;
+
+  constructor(private contentProjectionService: ContentProjectionService) {}
+
+  private setContainer() {
+    setTimeout(() => {
+      this.containerComponentRef = this.contentProjectionService.projectContent(
+        PROJECTION_STRATEGY.AppendComponentToBody(ConfirmationComponent),
+      );
+
+      this.containerComponentRef.changeDetectorRef.detectChanges();
+    }, 0);
+  }
+
   info(
     message: Config.LocalizationParam,
     title: Config.LocalizationParam,
@@ -47,6 +62,8 @@ export class ConfirmationService {
     severity?: Confirmation.Severity,
     options?: Partial<Confirmation.Options>,
   ): Observable<Confirmation.Status> {
+    if (!this.containerComponentRef) this.setContainer();
+
     this.confirmation$.next({
       message,
       title,

npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts

@@ -1,8 +1,9 @@
-import { Injectable } from '@angular/core';
+import { Injectable, ComponentRef } from '@angular/core';
 import { Toaster } from '../models';
 import { ReplaySubject } from 'rxjs';
-import { Config } from '@abp/ng.core';
+import { Config, PROJECTION_STRATEGY, ContentProjectionService } from '@abp/ng.core';
 import snq from 'snq';
+import { ToastContainerComponent } from '../components/toast-container/toast-container.component';
 
 @Injectable({
   providedIn: 'root',
@@ -14,6 +15,18 @@ export class ToasterService {
 
   private toasts = [] as Toaster.Toast[];
 
+  private containerComponentRef: ComponentRef<ToastContainerComponent>;
+
+  constructor(private contentProjectionService: ContentProjectionService) {}
+
+  private setContainer() {
+    this.containerComponentRef = this.contentProjectionService.projectContent(
+      PROJECTION_STRATEGY.AppendComponentToBody(ToastContainerComponent),
+    );
+
+    this.containerComponentRef.changeDetectorRef.detectChanges();
+  }
+
   /**
    * Creates an info toast with given parameters.
    * @param message Content of the toast
@@ -84,6 +97,8 @@ export class ToasterService {
     severity: Toaster.Severity = 'neutral',
     options = {} as Partial<Toaster.ToastOptions>,
   ) {
+    if (!this.containerComponentRef) this.setContainer();
+
     const id = ++this.lastId;
     this.toasts.push({
       message,

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -83,7 +83,13 @@ export function appendScript(injector: Injector) {
     TableSortDirective,
   ],
   providers: [DatePipe],
-  entryComponents: [HttpErrorWrapperComponent, LoadingComponent, ModalContainerComponent],
+  entryComponents: [
+    HttpErrorWrapperComponent,
+    LoadingComponent,
+    ModalContainerComponent,
+    ToastContainerComponent,
+    ConfirmationComponent,
+  ],
 })
 export class ThemeSharedModule {
   constructor(private errorHandler: ErrorHandler) {}