How to Customize the Waiting Popup Template in Angular Report Viewer
Customizing the waiting popup template in the Bold Reports Report Viewer allows you to create a tailored loading experience that matches your application’s branding. This guide provides step-by-step instructions for implementing a custom loading template in an Angular application.
Step-by-Step Instructions
1. Modify the app.component.html File
Open the app.component.html file and define the waitingPopupTemplate attribute within the <bold-reportviewer> component. This binds the viewer to a property in the TypeScript file.
<bold-reportviewer
id="reportViewer_Control"
[reportServiceUrl]="serviceUrl"
[reportPath]="reportPath"
[waitingPopupTemplate]="waitingPopupTemplate"
style="width: 100%; height: 950px">
</bold-reportviewer>
| Attribute | Description |
|---|---|
waitingPopupTemplate |
Binds the custom HTML template for the waiting popup to the Report Viewer. |
2. Update the app.component.ts File
In the app.component.ts file, initialize the waitingPopupTemplate property with the custom HTML and inline styles that you want to display while the report is loading.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Bold-Report-sample';
public serviceUrl: string;
public reportPath: string;
public waitingPopupTemplate: string;
constructor() {
this.serviceUrl = 'https://demos.boldreports.com/aspnet-core/ReportViewerWebApi';
this.reportPath = 'company-sales.rdl';
// Define the custom HTML template for the loader
this.waitingPopupTemplate = `<div id="customLoadingtemplate" style="display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #f9f9f9; background-image: url(https://cdn.syncfusion.com/hrportal/images/loader/pageloader.gif); background-repeat: no-repeat; background-position: center; background-size: 100px 100px; width: 400px; height: 250px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); font-family: Arial, sans-serif; color: #333;">
<p style="margin-top: 150px; font-size: 18px; font-weight: bold;">Loading reports...</p></div>`;
}
}
3. Preview the Application
Run the Angular application using the ng serve command. When the report begins processing, the Bold Reports Report Viewer displays the custom waiting popup template instead of the default loading spinner.
You can download the complete sample application here.
