I am using a MdDialogModule to show a Dialog window with an input field in it. The Modal is opening fine and I am able to enter text into input field and submit, but on clicking the Submit button, I want the data in the Input form to be returned to the Main Component that called the Dialog component and also close the Dialog.
How do I do this? I am able to pass data to MdDialog component, but didn't find any resource on how to return data to component from MdDialogComponent.
My Dialog component code looks like this
import { Component, OnInit, InjectionToken, Inject } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef } from "@angular/material";
@Component({
selector: 'app-add-book',
templateUrl: './add-book.component.html',
styleUrls: ['./add-book.component.css']
})
export class AddBookComponent {
constructor() { }
}
and the method in main component calling the dialog box looks like this. No response is being returned now, it returns Undefined as I haven't figured it out yet.
openCreateDialog() {
let dialogRef = this.dialog.open(AddBookComponent)
.afterClosed()
.subscribe(response => {
console.log(response);
});
}
First, you need to add MdDialogRef
to your dialog component
export class AddBookComponent {
constructor(private dialogRef: MdDialogRef<AddBookComponent>) { }
}
Then use dialogRef.close
to return the data
save() {
this.dialogRef.close({ data: 'data' });
}