Programatically Update Telerik Report Viewer Properties in Angular Project

I am developing an Angular 12.2 application which has a Telerik Angular Report Viewer (v12.21.326). My Angular template is as follows:

<tr-viewer #reportViewer
[reportSource]="{ report: 'report.trdp', parameters: {} }"
[containerStyle]="viewerContainerStyle"
[pageMode]="'SINGLE_PAGE'"
[parametersAreaVisible]="false"
[scale]="1.0"
[scaleMode]="'FIT_PAGE_WIDTH'"
[serviceUrl]="'http://localhost:12345/api/reports'"
[templateUrl]="'http://localhost:12345/api/reports/resources/templates/telerikReportViewerTemplate.html'"
[viewMode]="'INTERACTIVE'"
style="height: 100%;">
</tr-viewer>


I set some default values to my tr-viewer object as I get errors if not.

I am building this single component as a Web Component (Angular Element) and have 3 x @Input() for the host application to pass in the following:

1. report
2. serviceUrl
3. templateUrl

My typescript is as follows:

import { AfterViewInit, ChangeDetectorRef, Component, Input, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
import { TelerikReportViewerComponent } from '@progress/telerik-angular-report-viewer';


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [
'./app.component.css',
'../assets/reportviewer.css',
'../assets/kendo.blueopal.min.css',
'../assets/kendo.common.min.css',
],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {

@ViewChild('reportViewer', { static: true }) reportViewer!: TelerikReportViewerComponent;

@Input() report!: string;
@Input() serviceUrl!: string;
@Input() templateUrl!: string;

public viewerContainerStyle = {
position: 'relative',
width: '100%',
height: '100%',
['font-family']: 'ms sans serif'
};

constructor(private cdr: ChangeDetectorRef) { }

ngAfterViewInit(): void {
this.updateReportViewer();
}

ngOnChanges(changes: SimpleChanges): void {
if (changes.report || changes.reportServerPath || changes.templatePath) {
console.log(`ngOnChanges called. changes: `, changes);
this.updateReportViewer();
}
}

updateReportViewer(): void {
try {

this.reportViewer.serviceUrl = this.serviceUrl;
this.reportViewer.templateUrl = this.templateUrl;

const reportSource = {
report: 'report.trdp',
parameters: {}
};
this.reportViewer.setReportSource(reportSource as any);

// Trigger change detection
this.cdr.detectChanges();
} catch (error) {
this.handleError(error);
}
}

handleError(error: any): void {
console.error('Error updating report viewer:', error);
alert(`Error: ${error.message || error}`);
}

}


I build the web component and run it in the host application. If I set the default values in the html template for the reportSource, serviceUrl and templateUrl to valid values the report displays in the host component fine. If I set the report @Input() the report viewer will refresh to display the report passed in. However, no matter what I try I cannot get the serviceUrl and templateUrl values to change. Also, curiously, when I inspect the console.logs after this.reportViewer has been updated, the properties never appear to change from the default values set.

How should I be programatically updating an existing tr-viewer object please?

Continue reading...