ngx-modal
ngx-modal copied to clipboard
How to let parent component know which button clicked?
Hi, I'm trying this package within my project. What I'm trying to do is an add/delete confirmation. The parent component will continue to add/delete data if "yes" button got clicked in the modal confirmation window. Can you please give me an idea how to archive that? Thank you.
Hi, hope this is not too late.
What you can do is following:
- Create a Subject or EventEmitter - e.g. addSubject
- Subscribe to our subject/emitter with add/delete function
- Create a method that fires new event on subject/emitter and returns true
- Pass this method via settings as
onAction
body of action button to Modal dialog (remember onAction should return true or an Observable if you want it to close the dialog)
addEmitter = new EventEmitter();
addEmitter.subscribe(() => {
addSomething();
});
addSomething() {
// ... your code
}
openConfirmation() {
this.modalDialogService.openDialog(this.viewRef, {
title: 'Adding somethig',
childComponent: SimpleModalComponent,
data: { text: 'Are you sure your want to add something' },
actionButtons: [
{ text: 'Yes',
onAction: () => {
this.addEmitter.emit();
return true;
}
},
{ text: 'No', onAction: () => false }
]
});
}
When user clicks the button, he will fire the onAction, which will then trigger your add/delete method.
The other possibility (my choice) would be to pass the creation method directly to the Yes button's onAction
:
addSomething(): boolean {
// ... your code
return true;
}
openConfirmation() {
this.modalDialogService.openDialog(this.viewRef, {
title: 'Adding somethig',
childComponent: SimpleModalComponent,
data: { text: 'Are you sure your want to add something' },
actionButtons: [
{ text: 'Yes', onAction: () => this.addSomething() },
{ text: 'No', onAction: () => false }
]
});
}
Of course, your deletion would probably be async, so you would use Observable addSomething
instead of boolean.