Why ActiveReportsJS
Why Choose ActiveReportsJS Angular Apps?
3. Add the ActiveReportsJS Angular module and report viewer to your application.
1) Open the src/app/app-module.ts file and replace its contents with the following code.
import { NgModule, provideBrowserGlobalErrorListeners } from '@angular/core' ;
import { BrowserModule } from '@angular/platform-browser' ;
import { ActiveReportsModule } from '@mescius/activereportsjs-angular' ;
import { AppRoutingModule } from './app-routing-module' ;
import { App } from './app' ;
@NgModule({
declarations: [
App
],
imports: [
BrowserModule,
AppRoutingModule,
ActiveReportsModule
],
providers: [
provideBrowserGlobalErrorListeners()
],
bootstrap: [App]
})
export class AppModule { }
2) Open the src/app/app.ts file and specify the component template as shown in the code below.
@Component({
selector : 'app-root' ,
template :
'<div id="viewer-host"><gc-activereports-viewer (init)="onViewerInit()"> </gc-activereports-viewer></div> ' ,
standalone : false ,
styleUrl : './app.css' ,
})
3) The Init event handler inside src/app/app.ts set above is set to open the generated report "report.rdlx-json"
* Please set the report name dynamically according to the previously created file.
export class AppComponent {
@ViewChild(ViewerComponent, { static: false }) reportViewer! : ViewerComponent ;
onViewerInit() {
this.reportViewer.open( 'report.rdlx-json' );
}
}
4. Add styles to the viewer-host element.
Open the src/app/app.css file and add the CSS styles below.
#viewer-host {
width: 100%;
height: 100vh;
}
Please check the sample below for the full code.
5. Run the Angular app and check the results.
Run it using the npm start or yarn start, ng serve command.
npm start
For Angular Developers
Recommended Tutorial for Beginners to ActiveReportsJS
-
Creating reports using ActiveReportsJS Designer
Learn how to create report forms and bind data using the No-Code Report Designer program.
-
How to add a report designer to an Angular web application
This article explains how to add a report designer to an Angular app. The report designer allows end users to create and modify report forms themselves.
-
How to export a report to a PDF file without previewing it
This article explains how to export and save reports as PDF without the ActiveReportsJS viewer screen.
ActiveReportsJS Starter Template
Jump-Start Your Development with Customizable Samples and templates.
A variety of templates and samples using ActiveReportsJS. You can view live demos and download them to customize and use yourself.
Tax Invoice
This is a sample tax invoice required to prove a transaction and calculate value-added tax.
View Demo
Estimate
Here's a sample quotation, including pricing information, terms and conditions, supplier and purchaser information, and more.
View Demo
Transcript
This is a sample transcript that officially certifies a student's academic performance.
View Demo
Customer List
This sample was created to display customer information using a fixed page layout.
View Demo
ActiveReportsJS Key Features for Angular
List of Services
-
Powerful Data BindingList Item 1Enhanced data binding capabilities allow you to quickly and easily bind reports to REST APIs, OData, and GraphQL.
-
Flexible Report LayoutList Item 2Choose from two different layout types and a variety of controls to create a more complete report.
-
Data VisualizationList Item 3Generate high-performance JavaScript reports for your web applications using a variety of JSON data sources. Gain greater insights through tables, lists, and charts.
-
Custom ReportsList Item 4Leverage the Report Designer component to help users create reports faster and more sophisticated.
-
Perfect ViewerUse the viewer component to provide your end users with the best viewing, exporting, and printing capabilities.
-
Front-end Framework SupportActiveReportsJS supports all major frameworks, making it easy to integrate into Angular, React, Svelte, Vue, Nuxt, Next.js, and Vite applications.
