@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",
					"Type": "report",
					"Width": "9.7215in",
					"Body": {
					"Name": "Body",
					"Type": "section",
					ReportItems: [
						{ Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReports", Height: "10in" }
					]
					}
			});
    });
  }
}

1. Import viewer theme in src/styles.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.