Norvell, Please Merge

    @grapecity/activereports-angular
    TypeScript icon, indicating that this package has built-in type declarations

    3.2.0 • Public • Published

    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.

    Install

    npm i @grapecity/activereports-angular

    DownloadsWeekly Downloads

    300

    Version

    3.2.0

    License

    Commercial

    Unpacked Size

    508 kB

    Total Files

    41

    Last publish

    Collaborators

    • grapecity