DataViewsJS Angular Component

Supports Angular 7.x version or higher.

The DataViewsJS control can be integrated with the DataViewsJS component for Angular in Angular templates markup. This component adds the necessary functionality that allows the DataViewsJS control to be used in the Angular template markup, with the fully functional one-way and two-way property bindings and event bindings. This integration is smooth, as all the players, DataViewsJS control, DataViewsJS Angular component and Angular itself are written in the same TypeScript language.

DataViewsJS Angular component is shipped as a separate module published as @grapecity/dataviews.angular package which can be installed from npm by executing the following command from the NodeJS command prompt:

npm install @grapecity/dataviews.angular

See this topic for more details about DataViewsJS npm packages.

After that you can import NgModule using ESM import statements as in the below example:

import { DataViewModule } from '@grapecity/dataviews.angular';

Importing DataViewsJS Angular Component

With this setup, you can import Angular module and use the Angular component in your application. For example, this code adds a DataViewsJS component to AppComponent component's template:

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DataViewModule } from '@grapecity/dataviews.angular';
import '@grapecity/dataviews.grid'; // to apply default grid layout

@Component({
  template: '<gc-dataview [data]="data"></gc-dataview>',
  selector: 'app-root',
})
export class AppComponent {
  data: any[]; // put your data set here
}

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

The name of the custom HTML element (also known as Web Component) which is associated with DataViewsJS Angular component is gc-dataview.

Please see DataView component for referring the properties and events supported by the component.

The "created" Event

DataViewsJS Angular component includes a "created" event which is raised after the DataViewsJS control is initialized. You can use this event to perform further initialization in addition to setting up the properties in markup. For example:

<gc-dataview (created)="initDataView($event)"> </gc-dataview>

// implementation
export class AppComponent {
  constructor() {
    this.data = []; // your data set
  }

  initDataView(dataView) {
    // expand some nodes manually
    dataView.data.nodes.forEach((node) => {
      node.collapsed = false;
    });

    dataView.invalidate();
  }
}

Creating DataViewsJS Control in Code

DataViewsJS component for Angular is intended to be used in Angular template markup. If you want to create a DataViewsJS control in code, you should use a DataViewsJS control from a core module for this purpose, instead of an Angular component. For example, this code creates a DataViewsJS control in code:

import DataView from '@grapecity/dataviews.core';

let data = [];
let dataView = new DataView('#host_element', data);

Note: To import DataViewsJS control, we use '@grapecity/dataviews.core' module instead of '@grapecity/dataviews.angular'.

Adapting to Different Loader/Bundler Tools

Let's consider the specifics of adapting DataViewsJS with most popular module loaders and bundlers.

WebPack

DataViewsJS CSS styles are not included into the application bundle by default. However, this can be done manually by including the required CSS files into your application bundle. For example, this is how you can include gc.dataviews.core.css file using standard WebPack:

import 'style!css!@grapecity/dataviews.core/dist/gc.dataviews.core.css';

The style-loader and css-loader should be added to the "devDependencies" option of your application's package.json file:

{
  devDependencies: {
    'css-loader': '^0.23.1',
    'style-loader': '^0.13.1',
    // ... another libraries
  },
}

SystemJS Loader

You can map DataViewsJS npm module names to DataViews .js files. In the node_modules folder, add the following config options that you pass to the System.config method call:

const config = {
  map: {
    // You need a separate mapping for every DataViews package
    '@grapecity/dataviews.core': 'node_modules/@grapecity/dataviews.core/dist/gc.dataviews.core.min.js',
    '@grapecity/dataviews.grid': 'node_modules/@grapecity/dataviews.grid/dist/gc.dataviews.grid.min.js',
    '@grapecity/dataviews.calendar': 'node_modules/@grapecity/dataviews.calendar/dist/gc.dataviews.calendar.min.js',
    // ...
  },
};