README
ActiveReportsJS Angular Wrapper
This package is a part of the ActiveReportsJS and provides angular wrapper for ARJS Viewer Component
Usage Example
- Install Angular CLI using following command
npm install -g @angular/cli
- Create new application and navigate to the application folder:
ng new arjs-angular --defaults
cd arjs-angular
- Add reference to ActiveReportsJS Angular module:
npm install @grapecity/activereports-angular
- Save the following code in
src/app/app.component.html
:
<gc-activereports-viewer height="100vh" #reportviewer></gc-activereports-viewer>
- Register ActiveReportsModule in
src/app/app.module.ts
file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ActiveReportsModule } from '@grapecity/activereports-angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ActiveReportsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- Save the following module source code in
src/app/app.component.ts
:
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ViewerComponent } from '@grapecity/activereports-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
@ViewChild('reportviewer', { static: false }) reportviewer?: ViewerComponent;
ngAfterViewInit() {
this.reportviewer?.init.subscribe(() =>{
this.reportviewer?.open({
"Name": "Report",
"Body": {
"ReportItems": [
{
"Type": "textbox",
"Name": "TextBox1",
"Value": "Hello, ActiveReportsJS Viewer",
"Style": {
"FontSize": "18pt"
},
"Width": "8.5in",
"Height": "0.5in"
}
]
}
});
});
}
}
- Import viewer theme in
src/styles.css
:
@import '@grapecity/activereports/styles/ar-js-ui.css';
@import '@grapecity/activereports/styles/ar-js-viewer.css';
- Start application
npm start
- Go to http://localhost:4200/
Documentation
For more information on how to use ActiveReportsJS and available tools, refer to the Documentation or API reference for guidance.