New to Telerik Reporting? Download free 30-day trial

Updating the Report Parameters of the Native Angular Report Viewer

This topic explains how to update the report parameters with values passed from a custom UI outside the report viewer instead of using the report viewer's built-in parameters area.

The report identifier and all required parameter values for it are packed in a reportSource object. To update the report source, the setReportSource command can be used.

Example of using the setReportSource command

The following example will demonstrate how a select control outside of the Native Angular Report Viewer can have its selected value passed to the report viewer's reportSource:

<select #orderNumber value="SO51081" (change)="onChange(orderNumber.value)">
    <option *ngFor="let i of [1,2,3,4,5]">{{ "SO5108" + i }}</option>

        report: 'Invoice.trdx',
        parameters: {}
export class AppComponent {
    @ViewChild('report') public report: ReportingAngularViewerComponent;

    onChange(OrderNumber: string) {"setReportSource", {
            report: "Invoice.trdx",
            parameters: {

See Also

In this article