Event Binding

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

For a complete list of event handler options please check Events.