Skip to main content

Integration Suite widgets with Angular

tip

You should be familiar with basic concepts and patterns of Angular before reading this documentation. To refresh your knowledge, please refer to the Angular documentation.

DHTMLX Suite is compatible with Angular. For more information, refer to the corresponding example on GitHub: DHTMLX Suite with Angular Demo.

Create new Angular project​

info

Before you start to create a new project, install Angular CLI and Node.js.

Step 1. Create a project and name it as my-angular-suite-app:

ng new my-angular-suite-app
note

If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app!

The command above installs all the necessary tools, so you don't need to run any additional commands.

Step 2. Go to the project directory:

cd my-angular-suite-app

Step 3. Install dependencies and start the dev server. Use the yarn package manager:

yarn
yarn start

The app should run on a localhost (for instance http://localhost:3000).

Install Suite sources​

Install the DHTMLX Suite library to get access to Suite widgets. Refer to the following topic for more information: Installing DHTMLX Suite via npm or yarn

Create Angular component​

Now you can create Angular components (wrappers) based on Suite widgets. For each complex Suite widget you can create a separate file (for instance grid.component.ts) in the src/ directory.

Import source files​

Open the grid.component.ts file and import the corresponding Suite widget. Note that:

  • if you use PRO version and install the Suite package from a local folder, the import paths look as follows:
grid.component.ts
import { SuiteWidgetName } from "dhx-suite-package"; // import { Grid, Pagination, ... } from "dhx-suite-package";
import "dhx-suite-package/codebase/suite.css"; // import Suite styles

Note that depending on the used package, the source files can be minified. In this case, make sure that you import the CSS file as suite.min.css.

  • if you use the trial version of Suite, the import paths look as follows:
grid.component.ts
import { SuiteWidgetName } from "@dhx/trial-suite"; // import { Grid, Pagination, ... } from "@dhx/trial-suite";
import "@dhx/trial-suite/codebase/suite.min.css"; // import Suite styles

In this guide you can find basic concepts on how to utilize the trial version of Suite widgets.

Initialize Suite widget(s) within a container​

To display a Suite widget on a page, you need to create a container and initialize a widget through the corresponding constructor:

grid.component.ts
// import a Suite widget
import { Grid } from "@dhx/trial-suite";
// import Suite styles
import "@dhx/trial-suite/codebase/suite.min.css"; 

import {
  Component,
  ElementRef,
  OnInit,
  OnDestroy,
  ViewChild
} from "@angular/core";

@Component({
  selector: "app-grid",
  template: `<div className="component_container">
                <div #grid_container className="widget"></div>
             </div>`
})

// create and export the Angular component
export class GridComponent implements OnInit, OnDestroy {
    @ViewChild("grid_container", { static: true }) grid_container!: ElementRef;

    private _grid_widget!: Grid;

    ngOnInit() {
        // initialize a Suite widget
        this._grid_widget = new Grid(this.grid_container.nativeElement, {
            // configuration properties here
        });
    }

    ngOnDestroy() {
        this._grid_widget?.destructor(); // destruct a Suite widget
    }
}

Load data​

To add data into a Suite widget, you need to provide a data set. You can create the app.data.ts file in the src/ directory and add required data sets:

app.data.ts
export function getData() {
    const gridData = [
        {
            time: new Date("Jan 28, 2021"),
            nights: 7,
            price: 68,
            contactPerson: "Yoshio Slater",
            contactEmail: "phasellus.fermentum@yahoo.net"
        },
        {
            time: new Date("Apr 13, 2021")
            nights: 6,
            price: 66,
            contactPerson: "Christopher Kirk",
            contactEmail: "posuere.vulputate.lacus@outlook.org"
        },
        {
            time: new Date("Jan 31, 2021"),
            nights: 15,
            price: 64,
            contactPerson: "Jana Meyers",
            contactEmail: "mollis@aol.edu"
        }, 
        // other data items
    ];

    const sidebarData = [ /* ... */ ];

    return { gridData, sidebarData };
}

Specify data through the property​

To load predefined data into a Suite widget, you need to perform the following steps:

  1. Import predefined data
  2. Initialize the required data set
  3. Set the data property to the predefined data set within the Suite widget constructor
grid.component.ts
import { Grid } from "@dhx/trial-suite";
import "@dhx/trial-suite/codebase/suite.min.css"; 

import { getData } from "../../../app.data"; // 1. import predefined data

import {
  Component,
  ElementRef,
  OnInit,
  OnDestroy,
  ViewChild
} from "@angular/core";

@Component({
  selector: "app-grid",
  template: `<div className="component_container">
                <div #grid_container className="widget"></div>
             </div>`
})

export class GridComponent implements OnInit, OnDestroy {
    @ViewChild("grid_container", { static: true }) grid_container!: ElementRef;

    private _grid_widget!: Grid;

    ngOnInit() {
        const { gridData } = getData(); // 2. initialize the required data set 
        // initialize a Suite widget with data
        this._grid_widget = new Grid(this.grid_container.nativeElement, {
            data: gridData, // 3. set the `data` property to the predefined data set
            // other configuration properties
        });
    }

    ngOnDestroy() {
        this._grid_widget?.destructor(); // destruct a Suite widget
    }
}
tip

For more information, refer to the Data loading section of the corresponding control: Tree, Toolbar, Sidebar, Ribbon, Menu, List, Grid, DataView, Combobox, Chart, etc.

Specify data through the method​

To load predefined data into a Suite widget, you can also call the parse() method:

grid.component.ts
import { Grid } from "@dhx/trial-suite";
import "@dhx/trial-suite/codebase/suite.min.css"; 

import { getData } from "../../../app.data"; // 1. import predefined data

import {
  Component,
  ElementRef,
  OnInit,
  OnDestroy,
  ViewChild
} from "@angular/core";

@Component({
  selector: "app-grid",
  template: `<div className="component_container">
                <div #grid_container className="widget"></div>
             </div>`
})

export class GridComponent implements OnInit, OnDestroy {
    @ViewChild("grid_container", { static: true }) grid_container!: ElementRef;

    private _grid_widget!: Grid;

    ngOnInit() {
        const { gridData } = getData(); // 2. initialize the required data set 
        // initialize a Suite widget without data
        this._grid_widget = new Grid(this.grid_container.nativeElement, {
            // other configuration properties
        });

        this._grid_widget.data.parse(gridData); // 3. call the parse() method and pass data as a parameter
    }

    ngOnDestroy() {
        this._grid_widget?.destructor(); // destruct a Suite widget
    }
}

Handle events​

When a user performs some action in a Suite widget, an event is fired. You can use this event to detect an action and run the required code.

grid.component.ts
// ...

ngOnInit() {
    this._grid_widget = new Grid(this.grid_container.nativeElement, {});

    this._grid_widget.events.on("scroll", function({top,left}){
        console.log("The grid is scrolled to "+top,left);
    });
}

// ...

Now you know how to integrate and configure any Suite widget with Angular. You can customize the code according to your specific requirements. The extended example you can find on GitHub.