ngx-modal icon indicating copy to clipboard operation
ngx-modal copied to clipboard

How to let parent component know which button clicked?

Open shey-xx opened this issue 6 years ago • 1 comments

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.

shey-xx avatar Apr 17 '18 21:04 shey-xx

Hi, hope this is not too late.

What you can do is following:

  1. Create a Subject or EventEmitter - e.g. addSubject
  2. Subscribe to our subject/emitter with add/delete function
  3. Create a method that fires new event on subject/emitter and returns true
  4. 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.

meeroslav avatar Jun 11 '18 13:06 meeroslav