In my application, the webpage needs to display a progress bar while fetching data from multiple APIs and constructing a PDF document. For this purpose, I am using the jsPDF library to create the PDF. Below is the implementation in my template:
<div class="col-md-2 col-sm-2">
<mat-progress-bar mode="indeterminate" [value]="progressValue" *ngIf="isPrintinginProgress"></mat-progress-bar>
<Button class="btn btn-primary" style="align: right" (click)="printSelected()">Print Selected</Button></div>
The isPrintinginProgress variable is initialized at the start to hide the element and then updated to true within the printSelected() function to display the progress bar.
import {Component, OnInit} from '@angular/core';
import * as jsPDF from 'jspdf';
export class PrintViewComponent implements OnInit {
printList: PrintPendingOrderModel[];
isPrintinginProgress = false;
dataSource = new MatTableDataSource<PrintPendingOrderModel>(this.printList);
selection = new SelectionModel<PrintPendingOrderModel>(true, []);
constructor(private apiService: ApisService,
private utilService: UtilsService) { }
ngOnInit() {
}
printSelected() {
this.isPrintinginProgress = true; //displaying the progress bar
const doc = new jsPDF();
console.log('printing page:', page_no);
if (page_no < total_pages) {
console.log('end page:', page_no);
doc.addPage();
} else {
doc.autoPrint({variant: 'non-conform'});
window.open(doc.output('bloburl'), '_blank').focus();
console.log('Print Complete');
this.isPrintinginProgress = false; //hiding the progress bar
}
this.selection.clear();
}
If I set isPrintinginProgress to true initially, the progress bar appears on the page. However, changes in the isPrintinginProgress variable do not affect the functionality of elements using *ngif for show/hide operations.