feat: 🎸 allow updating the config via dialog ref

README.md

@@ -140,6 +140,32 @@ export class HelloWorldComponent {
 }
 ```
 
+- `ref.updateConfig` - An update function for the config, a common use case would be a reusable component setting its own common properties:
+
+```ts
+import { DialogService, DialogRef } from '@ngneat/dialog';
+
+@Component({
+  template: `
+    <h1>{{ ref.data.title }}</h1>
+    <button (click)="ref.close()">Close</button>
+  `,
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyVeryCommonDialogComponent {
+  ref: DialogRef<Data> = inject(DialogRef);
+
+  constructor() {
+    this.ref.updateConfig({
+      id: 'my-very-common-dialog'
+    });
+  }
+}
+```
+
+> You can only update the config before the dialog is opened in the component's constructor.
+
 The library also provides the `dialogClose` directive helper, that you can use to close the modal:
 
 ```ts
@@ -274,6 +300,8 @@ bootstrapApplication(AppComponent, {
 For each dialog instance you open you can specify all the global options and also the following 3 options.
 
 - `id` - The modal unique id (defaults to random id).
+> [!Note]  
+> while not required, it is recommended to set it to prevent unwanted multiple instances of the same dialog.
 - `vcr` - A custom `ViewContainerRef` to use.
 - `data` - A `data` object that will be passed to the modal template or component.
 
@@ -311,21 +339,21 @@ The default `sizes` config is:
   sizes: {
     sm: {
       height: 'auto',
-      width: '400px',
+        width: '400px',
     },
     md: {
       height: 'auto',
-      width: '560px',
+        width: '560px',
     },
     lg: {
       height: 'auto',
-      width: '800px',
+        width: '800px',
     },
     fullScreen: {
       height: '100%',
-      width: '100%',
+        width: '100%',
     },
- }
+  }
 }
 ```
 

apps/playground/src/app/test-dialog.component.ts

@@ -63,4 +63,8 @@ export class TestDialogComponent {
   timer$ = interval(1000);
   message = new UntypedFormControl('This dialog looks pretty cool 😎');
   ref: DialogRef<DialogData> = inject(DialogRef);
+
+  constructor() {
+    this.ref.updateConfig({ id: 'test-dialog' });
+  }
 }

libs/dialog/README.md

@@ -140,6 +140,32 @@ export class HelloWorldComponent {
 }
 ```
 
+- `ref.updateConfig` - An update function for the config, a common use case would be a reusable component setting its own common properties:
+
+```ts
+import { DialogService, DialogRef } from '@ngneat/dialog';
+
+@Component({
+  template: `
+    <h1>{{ ref.data.title }}</h1>
+    <button (click)="ref.close()">Close</button>
+  `,
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyVeryCommonDialogComponent {
+  ref: DialogRef<Data> = inject(DialogRef);
+
+  constructor() {
+    this.ref.updateConfig({
+      id: 'my-very-common-dialog'
+    });
+  }
+}
+```
+
+> You can only update the config before the dialog is opened in the component's constructor.
+
 The library also provides the `dialogClose` directive helper, that you can use to close the modal:
 
 ```ts
@@ -273,7 +299,9 @@ bootstrapApplication(AppComponent, {
 
 For each dialog instance you open you can specify all the global options and also the following 3 options.
 
-- `id` - The modal unique id (defaults to random id).
+- `id` - The modal unique id (defaults to random id). 
+> [!Note]  
+> while not required, it is recommended to set it to prevent unwanted multiple instances of the same dialog.
 - `vcr` - A custom `ViewContainerRef` to use.
 - `data` - A `data` object that will be passed to the modal template or component.
 

libs/dialog/src/lib/dialog-ref.ts

@@ -2,7 +2,7 @@ import { ComponentRef, TemplateRef } from '@angular/core';
 import { from, merge, Observable, of, Subject } from 'rxjs';
 import { defaultIfEmpty, filter, first } from 'rxjs/operators';
 
-import { JustProps } from './types';
+import { DialogConfig, GlobalDialogConfig, JustProps } from './types';
 import { DragOffset } from './draggable.directive';
 
 type GuardFN<R> = (result?: R) => Observable<boolean> | Promise<boolean> | boolean;
@@ -12,31 +12,34 @@ export abstract class DialogRef<
   Result = any,
   Ref extends ComponentRef<any> | TemplateRef<any> = ComponentRef<any> | TemplateRef<any>,
 > {
-  public ref: Ref;
-  public id: string;
-  public data: Data;
-
-  public backdropClick$: Observable<MouseEvent>;
-  public afterClosed$: Observable<Result | undefined>;
+  ref: Ref;
+  data: Data;
+  id: string;
+  backdropClick$: Observable<MouseEvent>;
+  afterClosed$: Observable<Result | undefined>;
 
   abstract close(result?: Result): void;
   abstract beforeClose(guard: GuardFN<Result>): void;
   abstract resetDrag(offset?: DragOffset): void;
+  abstract updateConfig(config: Partial<DialogConfig>): void;
 }
 
-export class InternalDialogRef extends DialogRef {
-  public backdropClick$: Subject<MouseEvent>;
+type InternalDialogRefProps = Partial<
+  Omit<JustProps<InternalDialogRef>, 'id' | 'data'> & Pick<InternalDialogRef, 'onClose' | 'onReset'>
+>;
 
+export class InternalDialogRef extends DialogRef {
+  config: DialogConfig & GlobalDialogConfig;
+  backdropClick$: Subject<MouseEvent>;
   beforeCloseGuards: GuardFN<unknown>[] = [];
+  onClose: (result?: unknown) => void;
+  onReset: (offset?: DragOffset) => void;
 
-  constructor(props: Partial<JustProps<InternalDialogRef>> = {}) {
+  constructor(props: InternalDialogRefProps = {}) {
     super();
     this.mutate(props);
   }
 
-  onClose: (result?: unknown) => void;
-  onReset: (offset?: DragOffset) => void;
-
   close(result?: unknown): void {
     this.canClose(result)
       .pipe(filter<boolean>(Boolean))
@@ -62,8 +65,19 @@ export class InternalDialogRef extends DialogRef {
     return merge(...guards$).pipe(defaultIfEmpty(true), first());
   }
 
-  mutate(props: Partial<InternalDialogRef>) {
+  mutate(props: InternalDialogRefProps) {
     Object.assign(this, props);
+    this.data = this.config.data;
+    this.id = this.config.id;
+  }
+
+  updateConfig(config: Partial<DialogConfig & GlobalDialogConfig>) {
+    this.mutate({
+      config: {
+        ...this.config,
+        ...config,
+      },
+    });
   }
 
   asDialogRef(): DialogRef {

libs/dialog/src/lib/dialog.component.ts

@@ -1,13 +1,22 @@
 import { CommonModule, DOCUMENT } from '@angular/common';
-import { Component, ElementRef, inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  inject,
+  isDevMode,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
 import { fromEvent, merge, Subject } from 'rxjs';
 import { filter, map, takeUntil } from 'rxjs/operators';
 
 import { InternalDialogRef } from './dialog-ref';
 import { DialogService } from './dialog.service';
 import { coerceCssPixelValue } from './dialog.utils';
 import { DialogDraggableDirective, DragOffset } from './draggable.directive';
-import { DIALOG_CONFIG, NODES_TO_INSERT } from './providers';
+import { NODES_TO_INSERT } from './providers';
 
 @Component({
   selector: 'ngneat-dialog',
@@ -50,8 +59,8 @@ import { DIALOG_CONFIG, NODES_TO_INSERT } from './providers';
   encapsulation: ViewEncapsulation.None,
 })
 export class DialogComponent implements OnInit, OnDestroy {
-  config = inject(DIALOG_CONFIG);
   dialogRef = inject(InternalDialogRef);
+  config = this.dialogRef.config;
 
   private size = this.config.sizes?.[this.config.size || 'md'];
   styles = {
@@ -82,8 +91,6 @@ export class DialogComponent implements OnInit, OnDestroy {
   private dialogService = inject(DialogService);
 
   constructor() {
-    this.host.id = this.config.id;
-
     // Append nodes to dialog component, template or component could need
     // something from the dialog component
     // for example, if `[dialogClose]` is used into a directive,
@@ -94,6 +101,19 @@ export class DialogComponent implements OnInit, OnDestroy {
       const classNames = this.config.windowClass.split(/\s/).filter((x) => x);
       classNames.forEach((name) => this.host.classList.add(name));
     }
+
+    if (!this.config.id) {
+      const id = `dialog-${crypto.randomUUID()}`;
+      this.config.id = id;
+      this.dialogRef.updateConfig({ id });
+      if (isDevMode()) {
+        console.warn(
+          `[@ngneat/dialog]: Dialog id is not provided, generated id is ${id}, providing an id is recommended to prevent unexpected multiple behavior`,
+        );
+      }
+    }
+
+    this.host.id = this.config.id;
   }
 
   ngOnInit() {