fix(modal): mark for check after update of modal options

jnizet · quentinderoubaix · commit afe98eef8fee · 2025-02-10T09:51:31.000+01:00
fix #4801
diff --git a/src/modal/modal-backdrop.ts b/src/modal/modal-backdrop.ts
@@ -1,5 +1,6 @@
 import {
 	afterNextRender,
+	ChangeDetectorRef,
 	Component,
 	ElementRef,
 	inject,
@@ -13,7 +14,10 @@ import {
 import { Observable } from 'rxjs';
 
 import { ngbRunTransition } from '../util/transition/ngbTransition';
-import { reflow } from '../util/util';
+import { isDefined, reflow } from '../util/util';
+import { NgbModalUpdatableOptions } from './modal-config';
+
+const BACKDROP_ATTRIBUTES: string[] = ['animation', 'backdropClass'];
 
 @Component({
 	selector: 'ngb-modal-backdrop',
@@ -30,6 +34,7 @@ export class NgbModalBackdrop implements OnInit {
 	private _nativeElement = inject(ElementRef).nativeElement as HTMLElement;
 	private _zone = inject(NgZone);
 	private _injector = inject(Injector);
+	private _cdRef = inject(ChangeDetectorRef);
 
 	@Input() animation: boolean;
 	@Input() backdropClass: string;
@@ -60,4 +65,13 @@ export class NgbModalBackdrop implements OnInit {
 			runningTransition: 'stop',
 		});
 	}
+
+	updateOptions(options: NgbModalUpdatableOptions) {
+		BACKDROP_ATTRIBUTES.forEach((optionName: string) => {
+			if (isDefined(options[optionName])) {
+				this[optionName] = options[optionName];
+			}
+		});
+		this._cdRef.markForCheck();
+	}
 }
diff --git a/src/modal/modal-ref.ts b/src/modal/modal-ref.ts
@@ -5,8 +5,7 @@ import { takeUntil } from 'rxjs/operators';
 
 import { NgbModalBackdrop } from './modal-backdrop';
 import { NgbModalWindow } from './modal-window';
-import { NgbModalOptions, NgbModalUpdatableOptions } from './modal-config';
-import { isDefined } from '../util/util';
+import { NgbModalUpdatableOptions } from './modal-config';
 
 import { ContentRef } from '../util/popup';
 import { isPromise } from '../util/util';
@@ -39,22 +38,6 @@ export class NgbActiveModal {
 	dismiss(reason?: any): void {}
 }
 
-const WINDOW_ATTRIBUTES: string[] = [
-	'animation',
-	'ariaLabelledBy',
-	'ariaDescribedBy',
-	'backdrop',
-	'centered',
-	'fullscreen',
-	'keyboard',
-	'role',
-	'scrollable',
-	'size',
-	'windowClass',
-	'modalDialogClass',
-];
-const BACKDROP_ATTRIBUTES: string[] = ['animation', 'backdropClass'];
-
 /**
  * A reference to the newly opened modal returned by the `NgbModal.open()` method.
  */
@@ -65,31 +48,15 @@ export class NgbModalRef {
 	private _resolve: (result?: any) => void;
 	private _reject: (reason?: any) => void;
 
-	private _applyWindowOptions(windowInstance: NgbModalWindow, options: NgbModalOptions): void {
-		WINDOW_ATTRIBUTES.forEach((optionName: string) => {
-			if (isDefined(options[optionName])) {
-				windowInstance[optionName] = options[optionName];
-			}
-		});
-	}
-
-	private _applyBackdropOptions(backdropInstance: NgbModalBackdrop, options: NgbModalOptions): void {
-		BACKDROP_ATTRIBUTES.forEach((optionName: string) => {
-			if (isDefined(options[optionName])) {
-				backdropInstance[optionName] = options[optionName];
-			}
-		});
-	}
-
 	/**
 	 * Updates options of an opened modal.
 	 *
 	 * @since 14.2.0
 	 */
 	update(options: NgbModalUpdatableOptions): void {
-		this._applyWindowOptions(this._windowCmptRef.instance, options);
+		this._windowCmptRef.instance.updateOptions(options);
 		if (this._backdropCmptRef && this._backdropCmptRef.instance) {
-			this._applyBackdropOptions(this._backdropCmptRef.instance, options);
+			this._backdropCmptRef.instance.updateOptions(options);
 		}
 	}
 
diff --git a/src/modal/modal-window.ts b/src/modal/modal-window.ts
@@ -1,6 +1,7 @@
 import { DOCUMENT } from '@angular/common';
 import {
 	afterNextRender,
+	ChangeDetectorRef,
 	Component,
 	ElementRef,
 	EventEmitter,
@@ -21,7 +22,23 @@ import { filter, switchMap, take, takeUntil, tap } from 'rxjs/operators';
 import { getFocusableBoundaryElements } from '../util/focus-trap';
 import { ModalDismissReasons } from './modal-dismiss-reasons';
 import { ngbRunTransition, NgbTransitionOptions } from '../util/transition/ngbTransition';
-import { isString, reflow } from '../util/util';
+import { isDefined, isString, reflow } from '../util/util';
+import { NgbModalUpdatableOptions } from './modal-config';
+
+const WINDOW_ATTRIBUTES: string[] = [
+	'animation',
+	'ariaLabelledBy',
+	'ariaDescribedBy',
+	'backdrop',
+	'centered',
+	'fullscreen',
+	'keyboard',
+	'role',
+	'scrollable',
+	'size',
+	'windowClass',
+	'modalDialogClass',
+] as const;
 
 @Component({
 	selector: 'ngb-modal-window',
@@ -58,6 +75,7 @@ export class NgbModalWindow implements OnInit, OnDestroy {
 	private _elRef = inject(ElementRef<HTMLElement>);
 	private _zone = inject(NgZone);
 	private _injector = inject(Injector);
+	private _cdRef = inject(ChangeDetectorRef);
 
 	private _closed$ = new Subject<void>();
 	private _elWithFocus: Element | null = null; // element that is focused prior to modal opening
@@ -127,6 +145,15 @@ export class NgbModalWindow implements OnInit, OnDestroy {
 		return transitions$;
 	}
 
+	updateOptions(options: NgbModalUpdatableOptions): void {
+		WINDOW_ATTRIBUTES.forEach((optionName: string) => {
+			if (isDefined(options[optionName])) {
+				this[optionName] = options[optionName];
+			}
+		});
+		this._cdRef.markForCheck();
+	}
+
 	private _show() {
 		const context: NgbTransitionOptions<any> = { animation: this.animation, runningTransition: 'continue' };
 
