HTML Report Viewer Angular Event handler

[Bob]

I have a report being rendered in an Angular component using the HTML report viewer. I want to display some additional information once the report has finished rendering - so I'm binding to the renderingEnd event of the viewer.

My problem is that I can't access the properties of component from within the callback function. "this" refers to the report viewer itself. Can you please point me in the direction to access the component's properties?

Thanks in advance.

Bob

 

 

[Nasko]

Hello Bob,

Which version of Angular is used in your application?

Please share some code snippets, so we can get a better idea of what is going on in the app.

Regards,
Nasko
Progress Telerik

[Bob]

Hi Nasko,

I'm running Angular v5.2.1

Template:

<tr-viewer #viewer1 id="reportViewer"
[containerStyle] = 'reportViewerStyle'
[serviceUrl] = 'serviceUrl'
[viewMode] = 'INTERACTIVE'
[scaleMode] = 'SPECIFIC'
[scale] = "1.0"
[renderingEnd] = "reportRendered" >
</tr-viewer>  

<div *ngIf="showDiv">Show this div</div>

 

Component:

export class MyComponent{

private showDiv = false;

function reportRendered(e: any, args: any) {

this.showDiv = true  <==== this.showDiv is undefined. "this" is pointing to the reportViewer object. What's the best way to access the MyComponent's property?

}

 

}

 

[Bob]

Minor correction:

function reportRendered(e: any, args: any)

is actually just

reportRendered(e:any, args:any)

 

[Nasko]

Hello Bob,

Inside report viewer events the this object will point to the report viewer object which is why showDiv is undefined in your example.

It is possible to change the scope of the function to the MyComponent scope as shown in the following example:

Template:

<div *ngIf="showDiv">Report has been rendered!</div>
<tr-viewer #viewer1
    [containerStyle]="viewerContainerStyle"
    [serviceUrl]="serviceUrl"
    [reportSource]="reportSource"
    [viewMode]="'INTERACTIVE'"
    [scaleMode]="'SPECIFIC'"
    [scale]="1.0"
    [renderingEnd]="boundReportRendered">
</tr-viewer>

Component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public boundReportRendered: Function;
  showDiv = false;
  title = "Report Viewer";
  viewerContainerStyle = {
    position: 'relative',
    width: '1000px',
    height: '800px',
    ['font-family']: 'ms sans serif'
  };

  public ngOnInit(){
    this.boundReportRendered = this.reportRendered.bind(this);
  }

  reportRendered(e: any, args: any) {
    this.showDiv = true;
  }
}

Regards,
Nasko
Progress Telerik

[Bob]

Nasko,

Thanks for the code snippets - this worked perfectly. I knew it had something to do with the binding, but I just couldn't get all of parts working correctly. Thanks for guidance! I really appreciate it.

Bob