How to create routing for a modal dialog in Angular 7?

How can I create routing for an existing modal dialog? I want to be able to enter in the modal URL and when I press enter, I should be displayed the modal dialog. Also, selecting the back button should take the user to the previous route.

I have tried the following create routing for the modal dialog for new and create:

When a user clicks on a button, the button changes the route to:

onPostEdit(){
this.router.navigate([`${this.post.postID}/edit`], {relativeTo: this.route})
// this.postItDialogService.openPostItDialogEdit(this.dialog, this.post);
}


My routing is then set up like this:

{ path: 'posts/new', component: PostItDialogContainerComponent },
{ path: 'posts/:id/edit', component: PostItDialogContainerComponent },


PostItDialogContainerComponent is this:

ngOnInit() {
this.postItDialog.openPostItDialog(this.dialog);
}


openPostItDialog is this:

public openPostItDialog(dialog: MatDialog): void {
const dialogRef = dialog.open(PostItDialog, {
width: '350px'
});
console.log("Dialog was open");

dialogRef.afterClosed().subscribe(() => {
console.log("The dialog was closed");
})


Then when the dialog is displayed I want to check the params and based on the params either display a fresh form or an existing one if it's an edit route

ngOnInit() {
this.route.params
.subscribe(
(params) => {
this.postID = +params['id'];
this.editMode = params['id'] != null;
this.initForm();
}
);
}


I have been at this for a day now. I cannot figure it out. I have a hacky way of doing it by manually changing the URL and then when the dialog closes clearing the URL. This only works for one use case, for a fresh form, but when I want to re-use it for editing post also. What am I doing wrong?

Continue reading...