DeeboData JS Grid Angular Grid React Grid
Contact Us Demo Pricing

DeeboData Angular Datagrid Project Directory Structure

Review the DeeboData Angular Data Grid's folder structure

angular version folders

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.



folder structure

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 quick start. 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

module folders

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

Data-Table Module
data table module directory
Charts Module
charts module directory

Services

Find and open this folder   service folder

Angular services

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

Angular services

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