New to Telerik Reporting? Start a free 30-day trial

Updating the Report Parameters of the Native Angular Report Viewer

Updated on Aug 31, 2026

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:

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

<reporting-angular-viewer
	#report
	[reportSource]="{
		report: 'Invoice.trdx',
		parameters: {}
	}"
	serviceUrl="https://demos.telerik.com/reporting/api/reports"
	viewMode="interactive"
	[keepClientAlive]="true">
</reporting-angular-viewer>
TS
export class AppComponent {
    @ViewChild('report') public report: ReportingAngularViewerComponent;

    onChange(orderNumber: string) {
        this.report.executeCommand("setReportSource", {
            report: "Invoice.trdx",
            parameters: {
                orderNumber
            }
        })
    }
}

Updating the Report Parameters of the Native Angular Report Viewer

Example of using the setReportSource command

See Also