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
  1. Home
  2. Forum
  3. Angular
  4. How to use Report Viewer in Angular 8
Starting in 2019, the Reporting control is no longer included in Essential Studio®. If you're experiencing issues with the Syncfusion� Reporting Platform, Report Viewer, Report Designer, or Report Writer, we recommend migrating to Bold Reports, our dedicated reporting platform.

Bold Reports offers a comprehensive suite of tools and features for all your reporting needs, and we will help you make a smooth transition from the discontinued control. Our support team at https://support.boldreports.com/ is here to assist you with any questions or difficulties you may encounter during the migration process.

We thank you for choosing Syncfusion� and appreciate your understanding.

How to use Report Viewer in Angular 8

Team,

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


Thanks
Tuariq

5 Replies
VS Vinoth Srinivasan Syncfusion Team 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, 

Regards, 
Vinoth S. 


TU Tuariq 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">
<head>
  <meta charset="utf-8">
  <title>XYZ</title>
  <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/14.3.0.52/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
</head>
<body>
  <app-root></app-root>
</body>
</html>

or Second: (angular.json)

"styles": [
              "src/styles.css",
"node_modules/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css"
            ]


Thanks
Tuariq


MS Mahendran Shanmugam Syncfusion Team 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. 
 
Regards, 
Mahendran S. 


TU Tuariq December 17, 2019 05:55 AM UTC

Team,

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?

Thanks
Tuariq

MS Mahendran Shanmugam Syncfusion Team 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. 
 
 
 
Regards, 
Mahendran S. 


Loader.
Up arrow icon