feat: allow to define config in scope of the dialog component class instance

Author: va-stefanek

projects/ngneat/dialog/src/lib/dialog.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule, DOCUMENT } from '@angular/common';
-import { Component, ElementRef, inject, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { fromEvent, merge, Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 import { InternalDialogRef } from './dialog-ref';

projects/ngneat/dialog/src/lib/dialog.service.ts

@@ -10,13 +10,13 @@ import {
   Type,
   ViewRef,
 } from '@angular/core';
-import { BehaviorSubject, startWith, Subject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
 import { DialogRef, InternalDialogRef } from './dialog-ref';
 import { DialogComponent } from './dialog.component';
 import { DragOffset } from './draggable.directive';
 import { DIALOG_CONFIG, DIALOG_DOCUMENT_REF, GLOBAL_DIALOG_CONFIG, NODES_TO_INSERT } from './providers';
 import { AttachOptions, DialogConfig, ExtractData, ExtractResult, GlobalDialogConfig, OpenParams } from './types';
-import { map } from 'rxjs/operators';
+import { isDialogWithConfig } from './dialog.utils';
 
 const OVERFLOW_HIDDEN_CLASS = 'ngneat-dialog-hidden';
 
@@ -56,8 +56,9 @@ export class DialogService {
     component: C,
     config?: Partial<DialogConfig<ExtractData<InstanceType<C>>>>
   ): DialogRef<ExtractData<InstanceType<C>>, ExtractResult<InstanceType<C>>>;
-  open(componentOrTemplate: any, config: Partial<DialogConfig<any>> = {}): DialogRef {
-    const mergedConfig = this.mergeConfig(config);
+  open(componentOrTemplate: Type<unknown> | any, config: Partial<DialogConfig<any>> = {}): DialogRef {
+    const componentConfig = isDialogWithConfig(componentOrTemplate) ? componentOrTemplate.getModalConfig() : {};
+    const mergedConfig = this.mergeConfig(config, componentConfig);
     mergedConfig.onOpen?.();
 
     const dialogRef = new InternalDialogRef({
@@ -216,11 +217,15 @@ export class DialogService {
     });
   }
 
-  private mergeConfig(inlineConfig: Partial<DialogConfig>): DialogConfig & GlobalDialogConfig {
+  private mergeConfig(
+    inlineConfig: Partial<DialogConfig>,
+    componentBasedConfig: Partial<DialogConfig>
+  ): DialogConfig & GlobalDialogConfig {
     return {
       ...this.globalConfig,
       id: nanoid(),
       ...inlineConfig,
+      ...componentBasedConfig,
       sizes: this.globalConfig?.sizes,
     } as DialogConfig & GlobalDialogConfig;
   }

projects/ngneat/dialog/src/lib/dialog.utils.ts

@@ -1,3 +1,6 @@
+import { DialogWithConfig } from './types';
+import { Type } from '@angular/core';
+
 function isNil(value: unknown): value is undefined | null {
   return value === undefined || value === null;
 }
@@ -13,3 +16,7 @@ export function coerceCssPixelValue(value: any): string {
 
   return isString(value) ? value : `${value}px`;
 }
+
+export function isDialogWithConfig(value: Type<unknown> | any): value is typeof DialogWithConfig {
+  return value.prototype instanceof DialogWithConfig;
+}

projects/ngneat/dialog/src/lib/specs/dialog.service.spec.ts

@@ -5,6 +5,7 @@ import { mapTo, timer } from 'rxjs';
 import { InternalDialogRef } from '../dialog-ref';
 import { DialogService } from '../dialog.service';
 import { DIALOG_DOCUMENT_REF, GLOBAL_DIALOG_CONFIG, provideDialogConfig } from '../providers';
+import { DialogWithConfig } from '../types';
 
 class FakeFactoryResolver {
   componentOne = {
@@ -236,6 +237,28 @@ describe('DialogService', () => {
       const attachSpyCalls = (fakeAppRef.attachView as jasmine.Spy).calls.allArgs();
       expect(fakeAppRef.attachView).toHaveBeenCalledTimes(2);
     });
+
+    it('should respect dialog config with the highest priority', () => {
+      @Component({ selector: '' })
+      class FakeComponentWithConfig extends DialogWithConfig {
+        constructor() {
+          super({
+            data: {
+              testProperty: true,
+            },
+          });
+        }
+      }
+
+      service.open(FakeComponentWithConfig, {
+        data: {
+          testProperty: false,
+        },
+      });
+
+      const dialog = service.open(FakeComponentWithConfig);
+      expect(dialog.data.testProperty).toEqual(true);
+    });
   });
 
   describe('on close', () => {

projects/ngneat/dialog/src/lib/types.ts

@@ -77,3 +77,14 @@ export interface AttachOptions {
   attachToApp: boolean;
   config: DialogConfig;
 }
+
+export class DialogWithConfig {
+  private static _dialogConfig?: Partial<DialogConfig>;
+  static getModalConfig = () => {
+    return DialogWithConfig._dialogConfig;
+  };
+
+  constructor(dialogConfig: Partial<DialogConfig>) {
+    DialogWithConfig._dialogConfig = dialogConfig;
+  }
+}