Guides
API StatusGet API KeysRoadmapHelp

Installation in Angular

Reference for installing Visualizations SDK in Angular applications.

Suggest Edits

Prerequisites

  • Follow the instructions on the Authentication page to get your access token.
  • You should also have Node.js and npm installed.

Installation

Node Package Manager can be used to install Visualizations. Follow the steps below to install based on your Angular version.

📘

Why Stencil?

Stencil is used by the Visualizations SDK to compile our components into Web components and the steps below illustrate how to set it up using various frameworks.

Installation Steps for Angular Versions 12.0.0+

Visualizations can be quickly integrated into your Angular project. The @railzai/railz-visualizations-angular package is the recommended way to use the Visualizations' components in Angular. This package provides Angular wrappers for the Visualizations' Web Components, allowing for close integration with Angular features.

  1. Run the following command to install the package.
// with yarn
yarn add @railzai/railz-visualizations-angular

// with npm
npm install @railzai/railz-visualizations-angular --save
  1. Import the RailzVisualizationsModule into your component module or app.module.ts file.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import {RailzVisualizationsModule} from "@railzai/railz-visualizations-angular";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RailzVisualizationsModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

<railz-visualizations
    [configuration]='config'
    [filter]='filter'
  >
</railz-visualizations>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  config = {token: 'ey'}
  filter = {businessName: 'businessName', serviceName:'quickbooks', reportType:'balanceSheet', startDate: '2022-01-24T00:00:00.000Z', endDate: '2022-01-25T00:00:00.000Z', reportFrequency:'month'}
  constructor() {
  }
}

Installation Steps for Angular Versions below 12.0.0

For Angular versions before 12.0.0, you can use the Visualizations using web component tags. Please visit the Visualization Components page for instructions on how to import each component.

  1. Run the following command to install the core package.
// with yarn
yarn add @railzai/railz-visualizations

// with npm
npm install @railzai/railz-visualizations --save
  1. Include Custom Elements Schema to your AppModule:
    To avoid compiler errors, you need to include the CUSTOM_ELEMENTS_SCHEMA. It should be added to the AppModule or to the individual modules that need the custom elements from the railz-visualizations components. Here's an example of how to include it in AppModule:
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent],
})
export class AppModule {}
  1. Use defineCustomElements() by calling it in the main.ts file.
    defineCustomElements() must be called once during the bootstrapping of your application and it must be called in the main.ts file. It is created by stencil to load the collection's components. 
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import {
  applyPolyfills,
  defineCustomElements,
} from '@railzai/railz-visualizations/dist/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

applyPolyfills().then(() => {
  defineCustomElements(window);
});
  1. Access Components in your code.
    Components can be accessed in your code using ViewChild and ViewChildren, as shown in the example below:
<railz-visualizations [configuration]='config' [filter]='filter'>
</railz-visualizations>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  config = {token: 'ey'}
  filter = {businessName: 'businessName', serviceName:'quickbooks', reportType:'balanceSheet', startDate: '2022-01-24T00:00:00.000Z', endDate: '2022-01-25T00:00:00.000Z', reportFrequency:'month'}
  constructor() {
  }
}

Basic Usage

To get you started here's a brief example that'll do the trick:

Updated 2 months ago

Read Next