Updating the Values of Report Parameters from the Angular Report Viewer

This topic explains how to update the report parameters with values passed from a custom UI instead of using the report viewer's default parameters area. The report identifier and all required parameters values for it are packed in a ReportSource object. To update the report source, the setReportSource(rs) method is used.

Pass values to report parameters from the application UI

1. Add the custom UI in your application. For example:

   • HTML

   <button (click)="onButtonClick(value)">Update parameter value</button>

2. Declare the variable for the viewer and update the viewer's report source with a new parameter value:

   • TypeScript

   import { Component, ViewChild } from '@angular/core';
   import { TelerikReportViewerComponent } from '@progress/telerik-angular-report-viewer';
   ...
   export class AppComponent {
       @ViewChild('viewer1') viewer: TelerikReportViewerComponent;
       ...
       onButtonClick(param: string) {
           var rs = {
               report: 'Invoice.trdp',
               parameters: { OrderNumber: param }
           };
           this.viewer.setReportSource(rs);
       }
       ...
   }

   The setReportSource(rs) method will automatically refresh the report with the new parameter values.