New to Telerik Reporting? Download free 30-day trial

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
    }
}

See Also

In this article