Progress® Telerik® Reporting R3 2017

Event Binding

The Angular Report Viewer exposes the events listed in 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:

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

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

TypeScript
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.