I am trying to do the following:
I have a parent page "movies", in which I have a button "add movies". which when clicked would open a pop-up page.
I will add the new movie and click on save in pop-up page. It will be added to the database as expected.
However, after adding the new movie, pop will close and control comes to the parent page and it should display the newly added movie name there, which is not happening.
The parent page will show the newly added movie name if I refresh the page. I want the parent page to show the newly added movie when the pop-up closes itself.
I assume that you are using the MatDialogModule.
In that case, you can parse the result to the parent component on the dialogues afterClosed() and add the new movie to the list.
See this example here : https://material.angular.io/components/dialog/examples#dialog-overview
Or:
class ParentComponent {
constructor(public dialog: MatDialog) {}
addMovie(){
const dialogRef = this.dialog.open()
dialogRef.afterClosed().subscribe(newMovie => <add new movie to list of movies>)
}
}
class MovieDialog {
constructor(public dialogRef: MatDialogRef<DialogOverviewExampleDialog>)
submitMovie() {
this.dialogRef.close(newMovie)
}
}
So In the ParentComponent we listen on afterClosed() which will get the newMovie when the MovieDialog this.dialogRef.close(newMovie) closes the dialog and emits the new movie.