Edit this page

Access component properties inside Angular Report Viewer events

Environment

Product ProgressĀ® TelerikĀ® Reporting
Viewer Angular Report Viewer

Description

Inside Angular Report Viewer events the this value will point to the report viewer object. This makes any Angular components' properties 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
        }
    }

Suggested Workarounds

It is possible to create a new bound function which wraps the reportRendered function. The new bound function has a this value equal to the AppComponent's this value.

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

Function.prototype.bind()

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy