New to Telerik Reporting? Download free 30-day trial

Add Custom Headers to Angular Report Viewer REST API Calls


Product Progress® Telerik® Reporting
Report Viewer Angular


I need to provide custom headers with every API call made by the Angular Report Viewer. My goal is to add an authorization token. I add the custom header via the interceptor token-http-interceptor.service.ts. However, the header is not added to the calls made by the Angular Report Viewer.


The Angular Report Viewer is a wrapper of the HTML5 Report Viewer, which is a jQuery widget and not a native Angular component. That's why you cannot add custom headers the Angular way - via the HTTP interceptor. In this article, we suggest two possible solutions.

Solution 1

The Angular Report Viewer comes with out-of-the-box support for an authenticationToken option. This option adds an Authorization header for every request to the REST service.

Solution 2

The second solution is to add the custom headers to the REST API calls of the Angular Report Viewer with jQuery's ajaxSetup function:

The following code represents one possible approach that can be used in the component with the Angular report viewer:

ngOnInit(): void {
    let $: any = (window as any)["jQuery"];
    $.ajaxSetup({xhrFields: { withCredentials: true } });
In this article