src/modal/modal-ref.ts

import { ComponentRef } from '@angular/core';

import { Observable, of, Subject, zip } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { NgbModalBackdrop } from './modal-backdrop';
import { NgbModalWindow } from './modal-window';
import { NgbModalUpdatableOptions } from './modal-config';

import { ContentRef } from '../util/popup';
import { isPromise } from '../util/util';

/**
 * A reference to the currently opened (active) modal.
 *
 * Instances of this class can be injected into your component passed as modal content.
 * So you can `.update()`, `.close()` or `.dismiss()` the modal window from your component.
 */
export class NgbActiveModal {
	/**
	 * Updates options of an opened modal.
	 *
	 * @since 14.2.0
	 */
	update(options: NgbModalUpdatableOptions): void {}
	/**
	 * Closes the modal with an optional `result` value.
	 *
	 * The `NgbModalRef.result` promise will be resolved with the provided value.
	 */
	close(result?: any): void {}

	/**
	 * Dismisses the modal with an optional `reason` value.
	 *
	 * The `NgbModalRef.result` promise will be rejected with the provided value.
	 */
	dismiss(reason?: any): void {}
}

/**
 * A reference to the newly opened modal returned by the `NgbModal.open()` method.
 */
export class NgbModalRef {
	private _closed = new Subject<any>();
	private _dismissed = new Subject<any>();
	private _hidden = new Subject<void>();
	private _resolve: (result?: any) => void;
	private _reject: (reason?: any) => void;

	/**
	 * Updates options of an opened modal.
	 *
	 * @since 14.2.0
	 */
	update(options: NgbModalUpdatableOptions): void {
		this._windowCmptRef.instance.updateOptions(options);
		if (this._backdropCmptRef && this._backdropCmptRef.instance) {
			this._backdropCmptRef.instance.updateOptions(options);
		}
	}

	/**
	 * The instance of a component used for the modal content.
	 *
	 * When a `TemplateRef` is used as the content or when the modal is closed, will return `undefined`.
	 */
	get componentInstance(): any {
		if (this._contentRef && this._contentRef.componentRef) {
			return this._contentRef.componentRef.instance;
		}
	}

	/**
	 * The promise that is resolved when the modal is closed and rejected when the modal is dismissed.
	 */
	result: Promise<any>;

	/**
	 * The observable that emits when the modal is closed via the `.close()` method.
	 *
	 * It will emit the result passed to the `.close()` method.
	 *
	 * @since 8.0.0
	 */
	get closed(): Observable<any> {
		return this._closed.asObservable().pipe(takeUntil(this._hidden));
	}

	/**
	 * The observable that emits when the modal is dismissed via the `.dismiss()` method.
	 *
	 * It will emit the reason passed to the `.dismissed()` method by the user, or one of the internal
	 * reasons like backdrop click or ESC key press.
	 *
	 * @since 8.0.0
	 */
	get dismissed(): Observable<any> {
		return this._dismissed.asObservable().pipe(takeUntil(this._hidden));
	}

	/**
	 * The observable that emits when both modal window and backdrop are closed and animations were finished.
	 * At this point modal and backdrop elements will be removed from the DOM tree.
	 *
	 * This observable will be completed after emitting.
	 *
	 * @since 8.0.0
	 */
	get hidden(): Observable<void> {
		return this._hidden.asObservable();
	}

	/**
	 * The observable that emits when modal is fully visible and animation was finished.
	 * Modal DOM element is always available synchronously after calling 'modal.open()' service.
	 *
	 * This observable will be completed after emitting.
	 * It will not emit, if modal is closed before open animation is finished.
	 *
	 * @since 8.0.0
	 */
	get shown(): Observable<void> {
		return this._windowCmptRef.instance.shown.asObservable();
	}

	constructor(
		private _windowCmptRef: ComponentRef<NgbModalWindow>,
		private _contentRef: ContentRef,
		private _backdropCmptRef?: ComponentRef<NgbModalBackdrop>,
		private _beforeDismiss?: () => boolean | Promise<boolean>,
	) {
		_windowCmptRef.instance.dismissEvent.subscribe((reason: any) => {
			this.dismiss(reason);
		});

		this.result = new Promise((resolve, reject) => {
			this._resolve = resolve;
			this._reject = reject;
		});
		this.result.then(null, () => {});
	}

	/**
	 * Closes the modal with an optional `result` value.
	 *
	 * The `NgbMobalRef.result` promise will be resolved with the provided value.
	 */
	close(result?: any): void {
		if (this._windowCmptRef) {
			this._closed.next(result);
			this._resolve(result);
			this._removeModalElements();
		}
	}

	private _dismiss(reason?: any) {
		this._dismissed.next(reason);
		this._reject(reason);
		this._removeModalElements();
	}

	/**
	 * Dismisses the modal with an optional `reason` value.
	 *
	 * The `NgbModalRef.result` promise will be rejected with the provided value.
	 */
	dismiss(reason?: any): void {
		if (this._windowCmptRef) {
			if (!this._beforeDismiss) {
				this._dismiss(reason);
			} else {
				const dismiss = this._beforeDismiss();
				if (isPromise(dismiss)) {
					dismiss.then(
						(result) => {
							if (result !== false) {
								this._dismiss(reason);
							}
						},
						() => {},
					);
				} else if (dismiss !== false) {
					this._dismiss(reason);
				}
			}
		}
	}

	private _removeModalElements() {
		const windowTransition$ = this._windowCmptRef.instance.hide();
		const backdropTransition$ = this._backdropCmptRef ? this._backdropCmptRef.instance.hide() : of(undefined);

		// hiding window
		windowTransition$.subscribe(() => {
			const { nativeElement } = this._windowCmptRef.location;
			nativeElement.parentNode.removeChild(nativeElement);
			this._windowCmptRef.destroy();
			this._contentRef?.viewRef?.destroy();

			this._windowCmptRef = <any>null;
			this._contentRef = <any>null;
		});

		// hiding backdrop
		backdropTransition$.subscribe(() => {
			if (this._backdropCmptRef) {
				const { nativeElement } = this._backdropCmptRef.location;
				nativeElement.parentNode.removeChild(nativeElement);
				this._backdropCmptRef.destroy();
				this._backdropCmptRef = <any>null;
			}
		});

		// all done
		zip(windowTransition$, backdropTransition$).subscribe(() => {
			this._hidden.next();
			this._hidden.complete();
		});
	}
}