Accessing Component Properties Inside Angular Report Viewer Events
Environment
| Product | Progress® Telerik® Reporting |
| Viewer | Angular Report Viewer |
Description
How can I access the properties of an Angular component from the report viewer events?
Cause
Inside the Angular Report Viewer events, the this value will point to the report viewer object. This makes the properties of any Angular component inaccessible in report viewer events.
Consider the following example:
Template
<div *ngIf="isReportRendered">Report has been rendered!</div>
<tr-viewer #viewer1
...
[renderingEnd]="reportRendered">
</tr-viewer>
Component
export class AppComponent {
isReportRendered = false;
...
reportRendered(e: any, args: any) {
this.isReportRendered = true; // run-time error: isReportRendered is undefined here
}
}
Solution
To work around the issue, it is possible to create a new bound function which wraps the reportRendered function. The new bound function will have a this value equal to the this value of the AppComponent.
Template
<div *ngIf="isReportRendered">Report has been rendered!</div>
<tr-viewer #viewer1
...
[renderingEnd]="boundReportRendered">
</tr-viewer>
Component
export class AppComponent {
boundReportRendered: Function;
isReportRendered = false;
...
public ngOnInit(){
this.boundReportRendered = this.reportRendered.bind(this);
}
reportRendered(e: any, args: any) {
this.isReportRendered = true; // displays the initially hidden div element
}
}