-1

I have a multiple charts in my page and I'm trying to make a delete call but some reason my chart UI is not updating immediately when I click the delete button. I always need to refresh the browser in order to see the changes.

I uploaded the full code for this two component her https://stackblitz.com/edit/angular-ivy-nnun96 so I would be really appreciated if I can get any suggestion on how to make the UI remove the Chart immediately when the user press Delete button.

Mc Chart List TS

  deleteChart(){
    this.chartService.deleteChart(this.chart.guid).subscribe((deleted) => {
      console.log(deleted);
    });
  }

Mc Chart List HTML

 <button mat-menu-item (click) = "deleteChart()" *ngIf = "chart.hasAccess && chart.canEdit && !chart.isPublished">Delete Chart</button>

Parent HTML

       <mc-chart-list [chart]="chart" [editMode]="true" [wsType]="workspace.type"></mc-chart-list>

Parent TS

ngOnInit(): void {
this.charts = this.workspace.charts;
}

It look like this right now

enter image description here

  • `Error in src/main.ts (6:27) Cannot find module './app/app.module` ur stackbliz is giving error – saitama Jun 18 '20 at 22:48
  • I understand that it won't work since I can't upload the whole project. I just put it there so that people can see the whole code and maybe they can help me from that. –  Jun 18 '20 at 22:51
  • the culprit must be in the ChartService, pls post that code on stackblitz too. is this project publicly accessible on github ? hey I live in Miami btw ! – ihor.eth Jun 19 '20 at 02:10

1 Answers1

0

You can use ChangeDetectorRef to detect changes on the view. 

import {ChangeDetectorRef} from '@angular/core';

constructor(private ref: ChangeDetectorRef)

deleteChart(){
    this.chartService.deleteChart(this.chart.guid).subscribe((deleted) => {
      console.log(deleted);
      this.ref.detectChanges();
    });
  }

Note: Remove changeDetection: ChangeDetectionStrategy.OnPush (if you are using it)

Suraj Gupta
  • 437
  • 8
  • 19