How to refresh page without reloading after closing dialog in Angular?-CodePudding

I am new to angular Material and I am working on my first project using it, however I have come to realize that after closing the dialog the page does not refresh, therefore you cannot see the new updates, either a new record you added, a record you updated or deleted, you cannot see it unless you either reload the page manually or via the following code:

openDialog(projectId:number):void{
  
  const dialogRef = this.dialog
  
  .open(UpdateProjectComponent, {
      data:{id: projectId}
  })


  .afterClosed()
  .subscribe((reloadOrNot:boolean)=>{
    
    if(reloadOrNot) window.location.reload();
})

if I change my code as follows nothing happens:

openDialog(projectId:number):void{
  
  const dialogRef = this.dialog
  
  .open(UpdateProjectComponent, {
      data:{id: projectId}
  })


  .afterClosed()
  .subscribe((reloadOrNot:boolean)=>{
    
   if(reloadOrNot) this.projectService.getProjects().subscribe(
      data=>{
        this.projects = data;
      }
    )

})

In the updateProjectComponent all I have is the reactive form to create the form programatically, a method to get the project by id and a method to update. All of these methods work, they do their jobs correctly, my only problem is that once I close the dialog the projects page is not refresh, unless I reload it, which is what I am trying to avoid.

I am calling a Java backend that provides all of the existing projects, however as mentioned before when clicking on submit button in the dialog page, the dialog closes but the projects page does not refresh the data. What would be the best way to handle this without the reload code?

CodePudding user response：

If I understand correctly, we don't see the rest of your code but changes to this.projects = data aren't registered with Angular Change Detection and your template does not refresh. For debugging we need more relevant code which deals with this.projects.

However there are ways to run change dedection cycle.

Using spread:

this.projects = ...data;

https://stackoverflow.com/a/64823904/15439733

Using CD ref

constructor(private cd: ChangeDetectorRef) {}

this.projects = data;
this.cd.dedectChanges();

https://angular.io/api/core/ChangeDetectorRef

Configure OnPush->Default (or remove this line altogether to use Default)

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  changeDetection: ChangeDetectionStrategy.OnPush,
})

https://angular.io/api/core/ChangeDetectionStrategy#OnPush