@grapecity/activereports-angular

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.