Angular Report Viewer Overview

The Angular Report Viewer is an Angular component that renders SSRS, RDL, RDLC, and Bold Reports® Server reports inside your Angular applications. You add it to your project as a standard Angular component and NgModule, so it fits directly into your existing component tree, routing, and build pipeline without any custom wrapper code.

This page introduces what the Angular Report Viewer does, the capabilities it provides out of the box, and where to go next to add it to your application.

What is the Angular Report Viewer?

The Angular Report Viewer is a client-side reporting component that displays RDL and RDLC report definitions with or without a report processing server. It can connect to Bold Reports® Server or SQL Server Reporting Services (SSRS) to load and render reports, or it can process report definitions locally when no report server is available. It handles the full report lifecycle in the browser: loading the report definition, binding data sources and parameters, rendering the report layout, and responding to viewer interactions such as paging, drilling, and exporting.

The component is distributed as an npm package and registered through an NgModule, which means it follows the same dependency-injection, change-detection, and lifecycle conventions as any other Angular component in your application.

With the Angular Report Viewer, you can

  • Display SSRS, RDL, and RDLC reports inside an Angular component, with or without a report server.
  • Bind data sources and report parameters programmatically from your Angular application.
  • Render interactive reports with drill-down, drill-through, hyperlinks, and interactive sorting.
  • Export rendered reports to PDF, Excel, CSV, Word, PowerPoint, and HTML formats.

Key features

Angular component and module integration

  • Ships as a standard Angular component and NgModule you import into a feature module.
  • Binds using native Angular template syntax.
  • Configured through component inputs and outputs, consistent with other Angular elements.

Interactive report rendering

  • Drill-down and drill-through navigation between report levels.
  • Clickable hyperlinks embedded in report content.
  • Interactive column sorting.

Customization and events

  • Customize UI elements such as the toolbar and parameter panel.
  • Hook into component events for before-export, after-render, and parameter-change steps.
  • Tailor report processing behavior to your application.

Broad reporting format and export support

  • Displays RDL and RDLC report definitions.
  • Exports to PDF, Excel, CSV, Word, PowerPoint, and HTML.
  • Covers the formats most business applications need to share report output.

Common use cases

Embedding operational dashboards

  • Add the Report Viewer to an Angular admin panel or internal tool.
  • Let operations teams view live SSRS or RDL reports without switching to a separate reporting application.

Connecting to an existing SSRS deployment

  • Point the viewer at an existing SSRS or Bold Reports® Server instance.
  • Display reports your organization already maintains.
  • Avoid duplicating existing report design work.

Standalone report display without a report server

  • Render RDLC reports directly in the browser, no report server required.
  • Well suited to lightweight applications or offline scenarios.

Report distribution and export workflows

  • Give stakeholders outside the application a report file they can open directly.
  • Support archival or compliance workflows that require a static copy of the report.

Who should use this guide?

This guide is intended for:

  • Angular developers integrating report viewing into a new or existing Angular application.
  • Full-stack developers connecting an Angular front end to an SSRS or Bold Reports® Server back end.
  • Report authors who need to verify how RDL or RDLC reports render inside an Angular application.
  • Technical leads evaluating reporting components for an Angular-based product.

Prerequisites

Before you begin:

  • Node.js and npm installed, along with the Angular CLI for creating and running an Angular application.
  • A basic working knowledge of Angular components, modules, and template binding.
  • An RDL or RDLC report file, or access to an SSRS or Bold Reports® Server instance, to display in the viewer.

No report server is required to get started; the Report Viewer can render RDLC reports locally, and a server is only needed when you want to connect to SSRS or Bold Reports® Server.

Considerations and limitations

  • Some advanced RDL features have platform-specific rendering behavior; review the limitations page before relying on complex report layouts.
  • Connecting to SSRS or Bold Reports® Server requires network access and valid credentials from the Angular application’s hosting environment.
  • Exporting large reports to formats such as PDF or Excel can be resource-intensive and should be tested with production-sized data.

FAQ

Do I need a report server to use the Angular Report Viewer?

No. The Report Viewer can render RDLC reports locally without a report server. A report server, such as SSRS or Bold Reports® Server, is only required when you want to load reports managed on that server.

Which report formats does the Angular Report Viewer support?

It displays RDL and RDLC report definitions and exports rendered reports to PDF, Excel, CSV, Word, PowerPoint, and HTML.

Can I use the Angular Report Viewer alongside jQuery, React, or Blazor reporting components in the same organization?

Yes. The Report Viewer is also available for jQuery, React, Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET Web Forms, WPF, and UWP, so you can standardize on the same reporting engine across different application stacks.

How do I customize the toolbar or parameter panel?

The Report Viewer exposes customization options and events for its user interface elements, including the toolbar. See the toolbar customization guide for details.

Getting help

For step-by-step setup instructions, see the getting started guides linked below. If you run into an issue that isn’t covered in this documentation, contact us by creating a support ticket.