如何在不重新加载 Angular 中的页面的情况下刷新 UI

Question

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

Answer 1

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)