Open
Description
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: