New to Telerik Reporting? Download free 30-day trial

Event Binding Overview

The Angular Report Viewer exposes these Events as input properties of the viewer component.

Bind to a report viewer event

To attach an event handler to the viewer, specify the name of your function when binding the corresponding input property of the viewer component. For example, we can attach to the ready and viewerToolTipOpening events of the viewer:

<tr-viewer
    [ready]="myReadyHandler"
    [viewerToolTipOpening]="myViewerToolTipOpeningHandler">
</tr-viewer>

Then, we can create the event handler functions in the component where the viewer is used:

export class AppComponent {
    myReadyHandler() {
        console.log('The viewer is ready!');
    }
    myViewerToolTipOpeningHandler(e: any, args: any) {
        console.log('Tooltip shows: ' + args.toolTip.text);
    }
}

See Also

In this article