@grapecity/activereports-angular

ActiveReportsJS components for Angular

Usage no npm install needed!

<script type="module">
  import grapecityActivereportsAngular from 'https://cdn.skypack.dev/@grapecity/activereports-angular';
</script>

README

ActiveReportsJS Angular Wrapper

This package is a part of the ActiveReportsJS and provides angular wrapper for ARJS Viewer Component

Usage Example

  1. Install Angular CLI using following command
npm install -g @angular/cli
  1. Create new application and navigate to the application folder:
ng new arjs-angular --defaults
cd arjs-angular
  1. Add reference to ActiveReportsJS Angular module:
npm install @grapecity/activereports-angular
  1. Save the following code in src/app/app.component.html:
<gc-activereports-viewer height="100vh" #reportviewer></gc-activereports-viewer>
  1. 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 { }

  1. 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"
            }
          ]
        }
      });
    });
  }
}
  1. Import viewer theme in src/styles.css:
@import '@grapecity/activereports/styles/ar-js-ui.css';
@import '@grapecity/activereports/styles/ar-js-viewer.css';
  1. Start application
npm start
  1. 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.