Angular Data Grid Documentation

The Angular Data Grid can be integrated into any existing Angular web project. There are no 3rd party dependencies or npm packages to add to your package.json. Currently, separate code for Angular v17 and Angular v20, and v21 are supported and included in the .zip or .tar file that downloads when you get the Angular Data Grid. All v17 components are explicitly standalone. A license comes with 1 Yr of full support and updates. Simply contact us if you hit an obstacle getting the data grid up and runnning.

Directory Structure

The data grid .zip (or .tar or .tar.gz) file that automatically downloads after purchase has folders for Angular v17, v20, and v21 with breaking changes all updated and tested in v20 and v21. For the transition to v21, our development team had to manually install zone.js with 'npm install zone.js'. We then added zone.js to the polyfills entry in the angular.json file. Check if your projects needs to follow similar steps when using Angular v21.

Open the folder for the version of Angular you're on and you will see the folder structure pictured to the left. This is obviously not a full Angular project, but rather the specific components, services, interfaces, and configuration files needed to add the data grid to your Angular app. So copy these files to the appropriate directories in your project and simply follow the integration guide. Your angular project should already have a style.css (or scss). Simply copy the data grid styles.css css rules into your global styles.css file. You can likely ignore the main.ts file as your Angular project should already have it's own.

Modules & Components

Find and open this folder data table folder

The two main modules that make up the data grid and charts reside in these folders.

Data-Table Module

Charts Module

Services

Find and open this folder service folder

The singleton services power data table features such as sorting and filtering (data-table-service.ts). You might have your own dedicated services folder. If so, simply copy these files into it.

Interfaces

Find and open this folder service folder

These interfaces provide structure to the data that makes up the components, which ultimately comprise the data grid.

Add the Angular data grid using the below guide

Import the DataTableModuleModule in the .ts file where you will add the data grid. You can add an implementation for the handleCellEdit function that is invoked each time a cell is edited. In most IDEs, the Angular compiler will help you point to the correct directory based on where you copied the datatable folder inside the downloaded .zip file (or .tar).

In your existing Angular project, place the below html code in the template (.html file) where you want the grid to appear. app-deebodata-data-table-component

In the services folder, find Angular data grid service code then update the Angular data grid rest code function with your rest api. Feel free to update the function name. This function gets called/referenced once in the deebodata-data-table-component ngOnInit lifecycle hook. It is essentially the starter function to obtain data and display it in the grid.

Inbuilt Web Workers will attempt to enhance performance. In your angular.json file, insert the below object properties for webWorkerTsConfig. The tsconfig.worker.json file is included in the downloaded .zip file (or .tar, tar.gz).

(Optional) Add symbols to numeric columns using the columnSymbols variable in the services/data-table-service.ts file The code is already prepared to place currency symbols in front and other symbols trailing the actual numeric data e.g. $12 or 50ft.

Column symbol directions