use ng-bootstrap modal inside modal component

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html

@@ -1,43 +1,23 @@
-<ng-template #template>
-  <div
-    *ngIf="visible"
-    [@fade]="isModalOpen"
-    id="modal-container"
-    class="modal show {{ modalClass }}"
-    tabindex="-1"
-    role="dialog"
-  >
-    <div class="modal-backdrop" (click)="close()"></div>
-    <div
-      id="abp-modal-dialog"
-      class="modal-dialog modal-{{ size }}"
-      role="document"
-      [class.modal-dialog-centered]="centered"
-      #abpModalContent
+<ng-content></ng-content>
+
+<ng-template #modalContent let-modal>
+  <div id="abp-modal-header" class="modal-header">
+    <ng-container *ngTemplateOutlet="abpHeader"></ng-container>
+    ​
+    <button
+      id="abp-modal-close-button"
+      type="button"
+      class="close"
+      aria-label="Close"
+      (click)="modal.dismiss()"
     >
-      <div id="abp-modal-content" class="modal-content">
-        <div id="abp-modal-header" class="modal-header">
-          <ng-container *ngTemplateOutlet="abpHeader"></ng-container>
-          ​
-          <button
-            id="abp-modal-close-button"
-            type="button"
-            class="close"
-            aria-label="Close"
-            (click)="close()"
-          >
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-        <div id="abp-modal-body" class="modal-body">
-          <ng-container *ngTemplateOutlet="abpBody"></ng-container>
-        </div>
-        <div id="abp-modal-footer" class="modal-footer">
-          <ng-container *ngTemplateOutlet="abpFooter"></ng-container>
-        </div>
-      </div>
-    </div>
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div id="abp-modal-body" class="modal-body">
+    <ng-container *ngTemplateOutlet="abpBody"></ng-container>
+  </div>
+  <div id="abp-modal-footer" class="modal-footer">
+    <ng-container *ngTemplateOutlet="abpFooter"></ng-container>
   </div>
 </ng-template>
-
-<ng-content></ng-content>

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts

@@ -9,17 +9,14 @@ import {
   OnDestroy,
   Optional,
   Output,
-  Renderer2,
   TemplateRef,
   ViewChild,
-  ViewChildren,
 } from '@angular/core';
+import { NgbModal, NgbModalOptions, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, filter, takeUntil } from 'rxjs/operators';
-import { fadeAnimation } from '../../animations/modal.animations';
 import { Confirmation } from '../../models/confirmation';
 import { ConfirmationService } from '../../services/confirmation.service';
-import { ModalService } from '../../services/modal.service';
 import { SUPPRESS_UNSAVED_CHANGES_WARNING } from '../../tokens/suppress-unsaved-changes-warning.token';
 import { ButtonComponent } from '../button/button.component';
 
@@ -28,9 +25,8 @@ export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 @Component({
   selector: 'abp-modal',
   templateUrl: './modal.component.html',
-  animations: [fadeAnimation],
   styleUrls: ['./modal.component.scss'],
-  providers: [ModalService, SubscriptionService],
+  providers: [SubscriptionService],
 })
 export class ModalComponent implements OnDestroy {
   @Input()
@@ -59,11 +55,11 @@ export class ModalComponent implements OnDestroy {
   @Input() modalClass = '';
 
   @Input() size: ModalSize = 'lg';
+  @Input() options: NgbModalOptions = {};
 
   @Input() suppressUnsavedChangesWarning = this.suppressUnsavedChangesWarningToken;
 
-  @ContentChild(ButtonComponent, { static: false, read: ButtonComponent })
-  abpSubmit: ButtonComponent;
+  @ViewChild('modalContent') modalContent: TemplateRef<any>;
 
   @ContentChild('abpHeader', { static: false }) abpHeader: TemplateRef<any>;
 
@@ -71,15 +67,12 @@ export class ModalComponent implements OnDestroy {
 
   @ContentChild('abpFooter', { static: false }) abpFooter: TemplateRef<any>;
 
+  @ContentChild(ButtonComponent, { static: false, read: ButtonComponent })
+  abpSubmit: ButtonComponent;
+
   @ContentChild('abpClose', { static: false, read: ElementRef })
   abpClose: ElementRef<any>;
 
-  @ViewChild('template', { static: false }) template: TemplateRef<any>;
-
-  @ViewChild('abpModalContent', { static: false }) modalContent: ElementRef;
-
-  @ViewChildren('abp-button') abpButtons;
-
   @Output() readonly visibleChange = new EventEmitter<boolean>();
 
   @Output() readonly init = new EventEmitter<void>();
@@ -92,7 +85,7 @@ export class ModalComponent implements OnDestroy {
 
   _busy = false;
 
-  isModalOpen = false;
+  modalRef: NgbModalRef;
 
   isConfirmationOpen = false;
 
@@ -105,13 +98,12 @@ export class ModalComponent implements OnDestroy {
   }
 
   constructor(
-    private renderer: Renderer2,
     private confirmationService: ConfirmationService,
-    private modalService: ModalService,
     private subscription: SubscriptionService,
     @Optional()
     @Inject(SUPPRESS_UNSAVED_CHANGES_WARNING)
     private suppressUnsavedChangesWarningToken: boolean,
+    private modal: NgbModal,
   ) {
     this.initToggleStream();
   }
@@ -123,21 +115,34 @@ export class ModalComponent implements OnDestroy {
   }
 
   private toggle(value: boolean) {
-    this.isModalOpen = value;
     this._visible = value;
     this.visibleChange.emit(value);
 
-    if (value) {
-      this.modalService.renderTemplate(this.template);
-      setTimeout(() => this.listen(), 0);
-      this.renderer.addClass(document.body, 'modal-open');
-      this.appear.emit();
-    } else {
-      this.modalService.clearModal();
-      this.renderer.removeClass(document.body, 'modal-open');
+    if (!value) {
+      this.modalRef?.dismiss();
       this.disappear.emit();
       this.destroy$.next();
+      return;
     }
+
+    setTimeout(() => this.listen(), 0);
+    this.modalRef = this.modal.open(this.modalContent, {
+      //TODO: set size to 'lg' when removed the size variable
+      size: this.size,
+      windowClass: this.modalClass,
+      centered: this.centered,
+      keyboard: false,
+      scrollable: true,
+      beforeDismiss: () => {
+        if (!this.visible) return true;
+
+        this.close();
+        return !this.visible;
+      },
+      ...this.options,
+    });
+
+    this.appear.emit();
   }
 
   ngOnDestroy(): void {
@@ -190,10 +195,7 @@ export class ModalComponent implements OnDestroy {
     setTimeout(() => {
       if (!this.abpClose) return;
       fromEvent(this.abpClose.nativeElement, 'click')
-        .pipe(
-          takeUntil(this.destroy$),
-          filter(() => !!this.modalContent),
-        )
+        .pipe(takeUntil(this.destroy$))
         .subscribe(() => this.close());
     }, 0);