Define dialog config on dialog class

[milo526]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

This feature request is related to #41, in that, I want to change the properties of the modal on the modal class. I, however, would like to be able to change the properties once, while initializing the component;

Currently, the configuration of a modal can only be set globally, or while opening the modal.

Expected behavior

I want to be able to define a partial config on the modal class itself.

We re-use some of our modals, we now have to either write helper functions that open the modal, or repeat the configuration. Having the config defined on the modal that uses it would solve this.

import { DialogService, DialogRef } from '@ngneat/dialog';

interface Data {
 title: string
}

@Component({
  template: `
    <h1>{{title}}</h1>
    <button (click)="ref.close(true)">Close</button>
  `
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloWorldComponent {

  static get modalConfig() {
    return {
      size: 'lg'
    }
  }

  ref: DialogRef<Data> = inject(DialogRef);

  get title() {
    if (!this.ref.data) return 'Hello world';
    return this.ref.data.title;
  }
}

import { DialogService } from '@ngneat/dialog';

@Component({
  standalone: true,
  template: ` <button (click)="open()">Open</button> `,
})
export class AppComponent implements OnInit {
  private dialog = inject(DialogService);

  ngOnInit() {
    const dialogRef = this.dialog.open(HelloWorldComponent, {
      // data is typed based on the passed generic
      data: {
        title: '',
      },
      // Defining the config on the modal component means we don't have to define the size here.
      // size: 'lg',
    });
  }
}

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Making the configuration of modals more DRY

Environment

Angular version: 15.1.1


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v18  
- Platform:  

Others:

[NetanelBasal]

You're welcome to submit a PR

[milo526]

I just noticed this issue is closed; I don't think this feature has been implemented yet.
Might it be that you closed this issue by accident?

[va-stefanek]

@NetanelBasal @milo526 I am working on PR. what will be your expected way to make sure that component define the config by it self? Should it implements some specific interface e.g

export interface DialogWithConfig {
  getModalConfig: () => DialogConfig;
}

[NetanelBasal]

LGTM