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>
</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>
export class AppComponent {
@ViewChild('report') public report: ReportingAngularViewerComponent;
onChange(OrderNumber: string) {
this.report.executeCommand("setReportSource", {
report: "Invoice.trdx",
parameters: {
OrderNumber
}
})
}
}