Getting started with ag-Grid and Angular

The “ag” part of ag-Grid stands for “agnostic”. The internal ag-Grid engine is implemented in TypeScript with zero dependencies. It is possible to use no framework with ag-Grid and use the fully-featured JavaScript-only version. ag-Grid also supports all major frameworks by providing ag-Grid Components for each popular framework and allowing customization of the grid using the framework of your choice.

ag-Grid is a fully-featured and highly customizable JavaScript data grid. It delivers outstanding performance, has no 3rd party dependencies and integrates smoothly with all major JavaScript frameworks.ag-Grid is the industry standard for Angular Enterprise Applications.

Besides the standard set of features you’d expect from any grid:

• Column Interactions (resize, reorder, and pin columns)
• Pagination
• Sorting
• Row Selection
• more

Setting up your Angular application

1. creating a new angular project

ng new ag-Grid-demo --style scss --routing false

2. npm install --save ag-grid-community ag-grid-angular

3. Add ag-grid module to app.module.ts

4. Add the styles in styles.scss

Implementation

Now we have set up the basic thing, we can start the implementation part. First, let's understand what we are going to build. We will be building ag-Grid with functionalities like data rendering, column dragging, sorting and filtering

1. Open your app.component.ts , inside app.component.ts ‘s constructor we will fetch the data from the HTTP endpoint and will set the rowData to what we get from the response.

The data in the HTTP response look like this:

2. The next step is to set the grid headers, this is how we set the headers to the grid. The property headerName is what we see on the grid header while the field is the key value in the row data

3. This is how app.component.html looks

we are binding the column definitions with columnDefs initialized inside app.component.ts and rowData with the response of HTTP endpoint

With this, you have a working ag-Grid that looks something like this

4. To make the columns sortable in ascending or descending order all we have to do is to set the sortable property to each column you want to be able to sort by

After adding the sortable property, we should be able to sort the grid by clicking on the column headers. Clicking on a header toggles through ascending, descending and no-sort.

5. As with sorting, enabling filtering is as easy as setting the filter property:

Here is the link to the project:

adityajoshi12/ag-grid-demo

That’s all for this article. In the next article, we will be using pagination, row selection, searching, customized cell rendering, etc. If you find this article helpful do hit the clap button and follow me for more such informative articles.