Angular Data Grid Documentation

Quick Start

The Angular Data Grid from DeeboData can be integrated into an existing Angular web project. Other than the widely used rxjs library, 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.

Add the Angular Data Grid to Your Project

Find the package.json file and make sure you run an npm install in your project for the packages listed in the "dependencies" section. Then, find the component in your project where you want to add the data grid. In that component's .ts (TypeScript) file, import the DataTableModuleModule at the top of the file with other imports.

You need to add the module to the imports array of the file where you just imported the data grid:

* Since all components are standalone, you can also just import the DeebodataDataTableComponent instead of the modularized approach we use by default. This component imports all the other necessary components.

Now, find the corresponding template (html) for the component where you imported the module, and place the html code below where you want the grid to appear. The code is for the selector of the main data grid component.:

This code will cause the data grid to appear in your component, and load the sample data set from an api request. Use the documentation side menu to learn more about the available features.

* New - Find licenseKey: string = "" in the and update it with your license key.

In the services folder, find then update the 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.

In the data-table-service.ts, find the apiUrl =  variable assignment. This is the default sample endpoint that's called to load data. Update this value with your actual API endpoint. Make sure you are returning an array of objects. See the ngOnInIt function below in the
data-table/data-table-module/deebodata-data-table-component/deebodata-data-table-component.ts

In line 177, notice that data.result is the array of objects returned by the API and passed to the initialization code.