Components: close dialog from it's own controller

Created on 22 Jun 2017 · 6Comments · Source: angular/components

Bug, feature request, or proposal:

Feature request or proposal

What is the expected behavior?

How can I close md-dialog from it's own controller and send data without clicking a buttons in md-dialog-actions container?

What is the current behavior?

It is not possible to close dialog and share data from the dialog controller.

What are the steps to reproduce?

Create md-dialog component and try to close it with sending a data by click on the element in md-dialog-content.

What is the use-case or motivation for changing an existing behavior?

I have an items list in the md-dialog. Every item have a checkbox and title. I wont to add checked items to data and send them by click on the md-dialog-actions button. And I want to add one item to the data, send it to parent controller and close dialog by click on the item title. How can I do it without crutches?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4+, Material beta.7

Is there anything else we should know?

Source

twoheaded

Most helpful comment

// FermentablesAddDialogComponent

constructor(
  private dialogRef: MdDialogRef<FermentablesAddDialogComponent>,
  @Inject(MD_DIALOG_DATA) public data: any
) { }

closeMyself() {
  this.dialogRef.close(123);
}

It's in the dialog overview page of the docs, but it's a little hidden

Components created via MdDialog can inject MdDialogRef and use it to close the dialog in which they are contained. When closing, an optional result value can be provided. This result value is forwarded as the result of the afterClosed promise.

willshowell on 22 Jun 2017

👍4 ❤2

All 6 comments

You can close the dialog with dialogRef.close(myValue). You don't need to click any buttons.

willshowell on 22 Jun 2017

It's possible from a parent controller, where I open my dialog window:

  openDialog() {
    let dialogRef = this.dialog.open(FermentablesAddDialogComponent, {
      data: []
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log(result);
    });
  }

But how can I use it from my dialog component?

twoheaded on 22 Jun 2017

// FermentablesAddDialogComponent

constructor(
  private dialogRef: MdDialogRef<FermentablesAddDialogComponent>,
  @Inject(MD_DIALOG_DATA) public data: any
) { }

closeMyself() {
  this.dialogRef.close(123);
}

It's in the dialog overview page of the docs, but it's a little hidden

Components created via MdDialog can inject MdDialogRef and use it to close the dialog in which they are contained. When closing, an optional result value can be provided. This result value is forwarded as the result of the afterClosed promise.

willshowell on 22 Jun 2017

👍4 ❤2

It works great! I think that this small example should be added to the documentation. Thank you

twoheaded on 22 Jun 2017

👍3

Just did! #5311

willshowell on 22 Jun 2017

👍2

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}