CODEWITHSUNDEEP
angulartypescript
user2603281
user2603281

Reputation: 33

Angular component is not updating UI when value changes

I have written a very simple component that includes a variable to keep track of state. When the value changes the UI is supposed to display different content accordingly. To test out the functionality I created the component, and am using a wait function to update the value after 5 seconds. While the variable is getting changed (I validated the change by logging it to the console), it does not seem to trigger a UI refresh. I have a hunch that I need to make the variable an observable, but I am not sure if that is overkill and if there is a simpler solution. Here is the code for my component

import { Component, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Component({
  selector: 'app-export',
  templateUrl: './export.component.html',
  styleUrls: ['./export.component.scss']
})
export class ExportComponent implements OnInit {

  flowId: number;

  constructor(public snackBar: MatSnackBar) {
    this.flowId = 1;
  }

  ngOnInit() {}

  incrementFlowID() {
    this.flowId++;
    console.log(this.flowId);
  }

  openSnackBar(message: string, action: string) {
    const snackBarRef = this.snackBar.open(message, action, {duration: 5000, });
    snackBarRef.afterDismissed().subscribe(() => {
      this.incrementFlowID();
    });
  }

  initiateExport() {
    this.incrementFlowID();
    this.openSnackBar('Your pdf document is being generated', '');
  }

}

The corresponding HTML snippet that is relevant here looks as follows:

    <div *ngIf="this.flowId == 1">
      <button mat-raised-button (click)="initiateExport()">Create PDF</button>
    </div>
    <div *ngIf="this.flowId == 2">
      <b>Your pdf document is being created.</b>
    </div>
    <div *ngIf="this.flowId == 3">
      <b>PDF document is complete.</b> <br/>
      <a href="#">Download document</a><br/>
    </div>

It seems while the event of "afterDismissed" properly updates the ID number, the change of the variable does not trigger a repainting of the UI. Any help on how to solve this would be greatly appreciated.

Upvotes: 3

Views: 15421

Answers (1)

SoEzPz
SoEzPz

Reputation: 15912

Remove 'this' from your html

<div *ngIf="flowId == 1">
  <button mat-raised-button (click)="initiateExport()">Create PDF</button>
</div>
<div *ngIf="flowId == 2">
  <b>Your pdf document is being created.</b>
</div>
<div *ngIf="flowId == 3">
  <b>PDF document is complete.</b> <br/>
  <a href="#">Download document</a><br/>
</div>

I see now, add this to your component. Working Link

import {Component, ViewEncapsulation, ChangeDetectorRef} from '@angular/core';

...
constructor(
public snackBar: MatSnackBar,
private ref: ChangeDetectorRef
) {
  this.flowId = 1;
}

...

openSnackBar(message: string, action: string) {
  const snackBarRef = this.snackBar.open(message, action, {duration: 5000, });
  snackBarRef.afterDismissed().subscribe(() => {
    this.incrementFlowID();
    this.ref.detectChanges();
  });
}

Upvotes: 7

Related Questions