We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to use Report Viewer in Angular 8


I have an Angular 8 project. General syncfusion controls we use come in Angular under web category (category wrongly chosen for this query since Report View control was not in it)

I want to use Report View control in my angular 8 project. Is this possible?
Using documentation steps solution fails to build


5 Replies

VS Vinoth Srinivasan Syncfusion Team December 16, 2019 04:50 AM

Hi Tuariq, 

Thanks for your interest in Syncfusion products. 

As per our plan of having the reporting components as separate from our Syncfusion Essential Studio, we were introduced Bold Reports from Syncfusion. Based on this we will not have the further feature updates with Syncfusion Essential Studio products from now onwards. So, you have to start using our Bold Reports for Reporting controls. Please refer the below getting started document for your reference. 

Also, please find the sample from below location for your requirement. 

Note: We have released Bold Reports with licensing. So, additionally you must register the license key in startup of your application as explained in below documentation, 

Vinoth S. 

TU Tuariq December 16, 2019 06:28 AM

Hi Team,

I have used Report Viewer of ej-angular2. I will consider using Bold Reports in place of it.
As of now in Report Viewer control I have styling issue.

After using style in index.html or  in styles of angular.json file, the styles of other syncfusion controls get overridden by it. How to use styles of report viewer control such that it does not affect other styles?

I am using styles in either of these ways:

First: (index.html)

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <base rel='nofollow' href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" rel='nofollow' href="favicon.ico">
   <link rel='nofollow' href="https://cdn.syncfusion.com/" rel="stylesheet" />

or Second: (angular.json)

"styles": [


MS Mahendran Shanmugam Syncfusion Team December 17, 2019 12:03 AM

Hi Tuariq, 

Could you please confirm whether are you trying to use the EJ2 controls along with Report Viewer control, if yes then we need to add the compatibility styles to override the issue at your end as shown in below snap. If no could you please share your issue reproducible Angular application to validate the mentioned problem at our end. 
Mahendran S. 

TU Tuariq December 17, 2019 12:55 AM


Yes. I am using EJ2 controls in the application. Report Viewer is the only ej1 control.
How to get the compatible styles and use it?


MS Mahendran Shanmugam Syncfusion Team December 17, 2019 01:05 AM

Hi Tuariq, 
Thanks for sharing the details. 
You can get the compatibility styles in node_modules installed location as shown in below snap and use this styles instead of web.all.min.css in your application. 
Mahendran S. 

Live Chat Icon For mobile
Up arrow icon