Integrate the Web Report Designer in Angular

Environment

Product Version	20.2.26.812
Product	Progress® Telerik® Reporting
Web Report Designer	Angular

Description

The Telerik Web Report Designer is a jQuery-based HTML5/JavaScript/CSS3 widget that allows you to integrate a report designer into your Angular web applications. While currently there is no dedicated Angular wrapper of the component, you can still integrate the jQuery version in your application, as explained in this article.

A native Angular wrapper for the Web Report Designer is currently under consideration for future development. If you would like to see this feature implemented, vote for the feature request Web Report Designer in Angular to help prioritize its development.

Prerequisites

To follow the steps from this tutorial, you must have:

• An Angular application where you want to embed the designer.

This article uses the public Reporting demos services so you can quickly try a proof of concept. For production use or full control, host your own Telerik Reporting REST service and Telerik Report Designer REST service.

Solution

Follow these steps to integrate the Telerik Web Report Designer in your Angular application:

1. Generate a new Angular component for the report designer:

   bash

   ng generate component report-designer

2. In your report-designer.component.html, add a container element for the designer:

   HTML

   <div id="webReportDesigner"></div>

3. In your report-designer.component.js(ts), dynamically load all required Telerik Web Report Designer resources, then initialize the designer:

   JavaScript

   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-report-designer',
     templateUrl: './report-designer.component.html',
     styleUrls: ['./report-designer.component.css']
   })
   export class ReportDesignerComponent {
     // For local services, use, for example: http://localhost:5000/api/reportdesigner/
     serviceUrl = 'https://demos.telerik.com/reporting/api/reportdesigner/';
   
     constructor() {}
   
     ngOnInit() {
       this.loadScripts().then(() => {
         $("#webReportDesigner").telerik_WebReportDesigner({
           serviceUrl: this.serviceUrl,
           report: "Product Line Sales.trdp"
         }).data("telerik_WebDesigner");
       });
     }
   
     loadScripts() {
       return this.loadScript('https://code.jquery.com/jquery-3.7.1.min.js')
         .then(() => this.loadScript('https://reporting.cdn.telerik.com/20.2.26.812/js/webReportDesigner.kendo.min.js'))
         .then(() => this.loadScript('https://reporting.cdn.telerik.com/20.2.26.812/js/telerikReportViewer.min.js'))
         .then(() => this.loadScript('https://reporting.cdn.telerik.com/20.2.26.812/js/webReportDesigner.min.js'));
     }
   
     loadScript(src) {
       return new Promise((resolve, reject) => {
         const script = document.createElement('script');
         script.type = 'text/javascript';
         script.src = src;
         script.onload = resolve;
         script.onerror = reject;
         document.body.appendChild(script);
       });
     }
   }

   TypeScript

   import { Component, OnInit } from '@angular/core';
   
   declare const $: any;
   
   @Component({
     selector: 'app-report-designer',
     templateUrl: './report-designer.component.html',
     styleUrls: ['./report-designer.component.css']
   })
   export class ReportDesignerComponent implements OnInit {
     // For local services, use, for example: http://localhost:5000/api/reportdesigner/
     private readonly serviceUrl = 'https://demos.telerik.com/reporting/api/reportdesigner/';
   
     private designer: any;
   
     ngOnInit(): void {
       this.loadScripts().then(() => {
         this.designer = $("#webReportDesigner").telerik_WebReportDesigner({
           serviceUrl: this.serviceUrl,
           report: 'Product Line Sales.trdp'
         }).data("telerik_WebDesigner");
       });
     }
   
     private loadScripts(): Promise<void> {
       return this.loadScript('https://code.jquery.com/jquery-3.7.1.min.js')
         .then(() => this.loadScript('https://reporting.cdn.telerik.com/20.2.26.812/js/webReportDesigner.kendo.min.js'))
         .then(() => this.loadScript('https://reporting.cdn.telerik.com/20.2.26.812/js/telerikReportViewer.min.js'))
         .then(() => this.loadScript('https://reporting.cdn.telerik.com/20.2.26.812/js/webReportDesigner.min.js'));
     }
   
     private loadScript(src: string): Promise<void> {
       return new Promise((resolve, reject) => {
         const script = document.createElement('script');
         script.type = 'text/javascript';
         script.src = src;
         script.onload = () => resolve();
         script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
         document.body.appendChild(script);
       });
     }
   }

Additional Resources

Download the demo application from the Reporting-Samples GitHub Repository.

To run the example:

bash

npm install && npm start

Known Issues

Keep the following limitations in mind when using the Telerik Web Report Designer in Angular:

1. Theming limitations—The Telerik Web Report Designer does not support custom theming. It uses a customized version of the Kendo SASS Default theme that loads automatically. If your Angular application uses a different Kendo theme, style conflicts may occur between the two themes.

   Starting with the Progress® Telerik® Reporting 2026 Q3 (20.2.26.812) release, custom theming is now supported in the Web Report Designer. See the Styling the Web Report Designer article for instructions on how to use a custom theme.

2. Duplicate CSS resources—The Web Report Designer automatically loads its required CSS styles each time it is initialized, without checking if they are already present. This can result in duplicate <style> tags in your page's <head>. If you need to reinitialize the designer multiple times in your application, you may need to manually remove duplicate style elements. See the demo project's designer.component.ts file for implementation details.

3. Angular Report Viewer compatibility—The Telerik Web Report Designer cannot coexist with the Angular Report Viewer in the same Angular application. While the designer includes its own built-in report viewer, if you need a standalone report viewer component, use either the Native Angular Report Viewer or the HTML5 Report Viewer instead.

See Also

• Test whether Web Report Designer Service is Responding