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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use Report Viewer in Angular 8

Thread ID:





149921 Dec 14,2019 10:08 AM UTC Dec 17,2019 06:05 AM UTC Angular 5
Tags: ejReportViewer
Asked On December 14, 2019 10:08 AM UTC


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


Vinoth Srinivasan [Syncfusion]
Replied On December 16, 2019 09:50 AM UTC

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. 

Replied On December 16, 2019 11:28 AM UTC

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": [


Mahendran Shanmugam [Syncfusion]
Replied On December 17, 2019 05:03 AM UTC

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. 

Replied On December 17, 2019 05:55 AM UTC


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?


Mahendran Shanmugam [Syncfusion]
Replied On December 17, 2019 06:05 AM UTC

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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon