Recently, I created a simple component that utilizes a variable to manage its state. The goal is to have the UI display different content based on changes in this variable. To test this functionality, I implemented the component and used a wait function to modify the value after a 5-second delay. Although the variable updates successfully (confirmed through console logging), it does not seem to trigger a refresh of the UI. I suspect that making the variable observable might be a solution, but I am unsure if it's necessary or if there's a simpler fix available. Below 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 relevant HTML snippet associated with this issue is shown below:
<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>
Despite successful updating of the ID number during the "afterDismissed" event, changes to the variable do not seem to trigger a UI repaint. Any guidance on how to address this issue would be highly appreciated.