Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Define dialog config on dialog class #89

Open
milo526 opened this issue Feb 6, 2023 · 4 comments
Open

Define dialog config on dialog class #89

milo526 opened this issue Feb 6, 2023 · 4 comments
Labels
enhancement New feature or request

Comments

@milo526
Copy link
Contributor

milo526 commented Feb 6, 2023

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
Copy link
Member

You're welcome to submit a PR

@NetanelBasal NetanelBasal added the enhancement New feature or request label Feb 13, 2023
@milo526
Copy link
Contributor Author

milo526 commented May 15, 2023

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?

@NetanelBasal NetanelBasal reopened this May 15, 2023
@va-stefanek
Copy link

@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
Copy link
Member

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants