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

Question

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?

The UpdateProjectComponent component is a component separate from the projectComponent. — Learner
– Learner, Commented Oct 18, 2022 at 4:03
I added ChangeDetection.OnPush in the projectsComponent, however when I close the dialog (updateprojectcomponent) nothing happens. I am forced to reload the page to see the changes. All methods work but the refresh part. — Learner
– Learner, Commented Oct 18, 2022 at 4:48

Joosep Parts · Accepted Answer · 2022-10-18 03:57:49Z

1

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

answered Oct 18, 2022 at 3:57

Joosep Parts

6,3452 gold badges13 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Learner Over a year ago

I added the changes above in the projectComponent, however when I close the dialog (updateprojectComponent) nothing happens, I still need to reload the page to see the changes.

Joosep Parts Over a year ago

You seem to be using updateForm I bet you need to update form control values with data.

Learner Over a year ago

should ChangeDetection.OnPush be added on projectsComponent or updateprojectcomponent (dialog)? I added it in projectsComponent but did not work.

Learner Over a year ago

Joosep, in the updateProjectComponent (dialog) I am populating the form using the data and it works. The idea is that a user click on a project and then the project id is sent to the dialog page where I get the data associated to that project id (that's working well), when users click on the submit button to update the record, the update works but I need to refresh the projectComponent page to see it.

Learner Over a year ago

Joosep, I added the ChangeDetection.OnPush in the projectComponent and additionally in the openDialog method in the afterClosed() I added the code where I populate the table using mat-table which uses a datasource. That fixed the problem and now is refreshing correctly without reloading. Thanks.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related