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

How to let parent component know which button clicked? #21

Open
shey-xx opened this issue Apr 17, 2018 · 1 comment
Open

How to let parent component know which button clicked? #21

shey-xx opened this issue Apr 17, 2018 · 1 comment

Comments

@shey-xx
Copy link

shey-xx commented Apr 17, 2018

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.

@meeroslav
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants