How to update UI immediately in Angular

Question

I have a dialog box where a user can copy a charts to different workspace card but when ever user click on selected workspace card to copy particular chart, the Chart count is not updated immediately on the selected workspace card.

The chart is copied but the chart count on the workspace card is not updated.

I can only see the chart count number change when I close the Copy Dialog and open it again.

I'll be really appreciated if I can get any suggestion or help on how I can update the chart count immediately on selected workspace card without having to close the dialog first.

Workspace Card.HTML

<div>
<span class="details ws-name" matLine>{{chartCount}} Chart{{chartCount !== 1 ? 's' : ''}}</span>
</div>

Workspace Card.TS

chartCount: number = 0;

ngOnInit(): void {
 if(!this.workspace.chartCount && this.workspace.charts) {
      this.chartCount = this.workspace.charts.length;
 }
  else {
      this.chartCount = this.workspace.chartCount;
 }
}

Select Workspace List.HTML

<div class="header">Copy Chart to a Workspace</div>
  <mat-hint class="sub-header">Select one of the following workspaces. The chart will be automatically staged.</mat-hint>
<mat-progress-bar *ngIf="loading || copying" color="primary" mode="indeterminate"></mat-progress-bar>
<div class="list" *ngIf="!loading">

 <mc-workspace-card *ngFor="let workspace of workspaces" [workspace]="workspace" [isCopyModal] = "true" (click)="copy(workspace)">
</mc-workspace-card>

</div>

Select Workspace List.TS

  copy(workspace: Workspace) {
    this.copying = true;
    this.chartService.copyChartToWorkspace(this.chartGuid, workspace.guid).subscribe(newChart => {
      this.copying = false;
      this._snackBar.open(`Chart has been copied to ${workspace.name}`, 'Check it out!', { duration: 5000,  panelClass: "snackbar-button" }).onAction().subscribe(() => {
        this.dialogRef.close();
        this.router.navigate(['workspace', workspace.guid], { state: { data: workspace.guid } });
      })
    })
  }

Answer 1

Maybe you can use the async pipe like:

<p>{{ name | async}}</p>

Name can be anything!

Answer 2

I think why it is not immediately updating is because you are not using Two way binding. If I am correct, you want to update the charts count in the workspace card, then simply use:

<mc-workspace-card *ngFor="let workspace of workspaces;let index = index;" [(ngModel)]="workspaces[index]" [isCopyModal] = "true" (click)="copy(workspace)">

Note the use of [(ngModel)] here to implement it.

Answer 3

From what I can see you only ever update chartCount in the ngOnInit which happens exactly once (when you load the the component).

You would either need to update that charCount property in WorkspaceCard.ts or, probably easier, write a function to do the logic and use that.

WorkspaceCard.ts

getChartCount(): number {
  return (!this.workspace.chartCount && this.workspace.charts) ? this.workspace.charts.length : this.workspace.chartCount;
}

WorkspaceCard.html

<div>
  <span class="details ws-name" matLine>{{getChartCount()}} Chart{{getChartCount()!== 1 ? 's' : ''}}</span>
</div>

Answer 4

It seems Like your function to update the chart number in a workspace is written in the ngOnInit() and remember that anything within it will be called once when the component is loaded. What you can do is to write your codes in a function out of ngOnInt which you will be calling in ngOnInit(). It will help you to call it again after the copying of a chart so as to have your workspace updated.

updateChartNumber(){
if(!this.workspace.chartCount && this.workspace.charts) {
      this.chartCount = this.workspace.charts.length;
 }
  else {
      this.chartCount = this.workspace.chartCount;
 }
}

Then call this function in OnInit()

OnInit(){
 this.updateChartNumber()
}

After copying to workspace call the function again to update the workspace charts number

 copy(workspace: Workspace) {
    this.copying = true;
    this.chartService.copyChartToWorkspace(this.chartGuid, workspace.guid).subscribe(newChart => {
      this.copying = false;
      this._snackBar.open(`Chart has been copied to ${workspace.name}`, 'Check it out!', { duration: 5000,  panelClass: "snackbar-button" }).onAction().subscribe(() => {
        this.dialogRef.close();
        this.router.navigate(['workspace', workspace.guid], { state: { data: workspace.guid } });
      })
    })
    this.updateChartNumber()
  }

That's what I can help you, Let me know if you have questions

Way 2: You can also call the ngOnInit() whenever the function copy() is called.