Reload page after reactive form submission inside a dialog

I have an Angular reactive form inside a dialog component. The dialog component is opened from a page component which is routed as '/mypage'. I want my page to be reloaded when the form is submitted so a given table inside my page is refreshed with the data posted to the backend from the form.

The mypage is not being reloaded after submission so I don't see the new posted data.

In addition to the following code, I tried using onSameUrlNavigation: 'reload' to the app-routing module imports, and so routerLink="/mypage" to the submission button of the form, but it neither reloads the mypage.

Which other approach should be considered?

dialog.component.html

<div mat-dialog-content>
    <form [formGroup]="newGroupForm" (ngSubmit)="onSaveNewGroup()">

        <div fxLayout="column" fxLayoutAlign="space-between space-between">

            <mat-form-field class="form-field" appearance="outline"
            fxFlex>
                <mat-label>Name</mat-label>
                <mat-hint>Group Name</mat-hint>
                <input matInput formControlName="groupname">
            </mat-form-field>

            <mat-form-field class="form-field" appearance="outline"
            fxFlex>
                <mat-label>Description</mat-label>
                <mat-hint>Group Description</mat-hint>
                <textarea matInput formControlName="groupdescription"></textarea>
            </mat-form-field>

        </div>
        
        <button mat-raised-button color="primary" mat-dialog-close type="submit">Save</button>
        
    </form>
</div>

dialog.component.ts

...
  export class NewGroupDialogComponent implements OnInit {

  constructor(private apiService: ApiService) {
    this.newGroupForm = new FormGroup({
      'groupname': new FormControl(null, [Validators.required]),
      'groupdescription': new FormControl(null, [Validators.required])
    });
  }

  ngOnInit(): void {
    
  }

  newGroupForm: FormGroup;

  onSaveNewGroup() {
    const body = {
      "name": this.newGroupForm.value.groupname,
      "description": this.newGroupForm.value.groupdescription
    }

    this.apiService.postGroup(body)
    .subscribe(group => {
      
    })
  }

}

mypage.component.html

...
                <button
                    mat-raised-button
                    color="primary"
                    (click)="onCreateGroup()">
                    New Group
                </button>

mypage.component.ts

  ...
  onCreateGroup() {
    let dialogConfig = new MatDialogConfig
    dialogConfig.height = "80vh"
    dialogConfig.width = "80vw"
    this.newGroupDialog.open(NewGroupDialogComponent, dialogConfig)
  }

Solution

That might be because of RouteReuseStrategy.

Let's try a quick dirty approach to make sure it's because of the reuse strategy; Add this to your component's ngOnInit():

ngOnInit(): void {
  /* prevent angular from reusing the same route. */
  this._router.routeReuseStrategy.shouldReuseRoute = () => false;
}

If it worked then implement your custom RouteReuseStrategy and add it to your module.ts file:

providers: [
    {
        provide: RouteReuseStrategy,
        useClass: CustomRoutingReuseStrategy
    }
]

For more information check RouteReuseStrategy