Everything You Need To Know About Tech

Get started with Angular Grid in 5 minutes

0 32

The data grid paradigm should be familiar to most developers. This is the component used to display tabular data in a series of rows and columns. Perhaps the most common example of a desktop data grid is Excel. Grids have long existed on native platforms and recently made their way into the UI of web applications.

Modern grids are complex. The costs of developing your own solutions are quite high. That is why most companies and software developers choose grids available in the market. It is not surprising that there are many grids available for free or in the form of paid subscriptions. But how do you choose it? Simply.

If the grid meets the requirements of functionality and performance, developers look at the ease of integration and configuration. The availability of full-featured documentation covering all functions and the availability of examples greatly simplifies the selection.

Our Angular grid component is where you find it all.

It is based on the fastest and most versatile grid -  ag-Grid . It was specifically designed to handle enterprise-level data volumes and is equipped with features that meet most requirements. We also added additional information to the documentation to describe each function and settings.

We base all of our Angular grid UI interactions in the familiar Excel functionality so that users can get started with the grid. Because of this similarity, a grid is also referred to as an Angular Table or Angular Data Table.

This article provides an example of an Angular grid and shows how easy it is to integrate and customize it. This 5-minute getting started guide with examples you can copy / paste will allow you to get started quickly. As soon as we get down to the basic setup, I will show you some functions and configuration options. Here is a preview of what the finished product will look like:

Let’s start!


ag-Grid and its Angular grid component can be easily integrated into any build configuration of an Angular project. Since they are distributed as NPM packages, ag-grid integration is just importing the AgGridModule class into the main application and specifying in the container component template.

We are going to create an Angular application with the Angular CLI, so we do not need to worry about configuring and customizing the tools. Install the CLI globally if you do not have it, and then run the following commands in your terminal:

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve

If everything works as expected, ng serves will start the webserver. You can open the application on localhost:4200 and check it.

Now we are ready to add ag-Grid NPM packages. Run the following command in my-app (you may need a new terminal):

npm install --save ag-grid ag-grid-angular

We now have a fully loaded Angular application with an Angular DataGrid component available for integration.

Import Dependencies

The angular grid component is distributed as part of the AgGridModule. To use the component, we must first import this module into the main application module in src/app / app.module.js:

import { AgGridModule } from 'ag-grid-angular';

  imports: [AgGridModule.withComponents(null)],
export class AppModule {}

withComponents The method that you invoke in the AgGridModule is used to declare the Angular components used inside the AG-Grid. This is a normal case if you extend the functionality of ag-grid by default using your custom logic.

We also need to import several styles with the ag-grid theme in src / styles.css:

@import 'ag-grid/dist/styles/ag-grid.css';
@import 'ag-grid/dist/styles/ag-theme-balham.css';

Adding Angular Grid Component to Template

Now we can use the Angular Grid component directly in the container of the App component. Open src/app / app.component.html in your favorite text editor and add the ag-grid-angular component to the markup:

    style="width: 500px; height: 500px;" 

The HTML above includes a div wrapper that sets the size and theme of the grid by setting className to ag-theme-balham. As you may have noticed, the CSS class corresponds to the name of the CSS file that we imported earlier. The grid conveys several different topics that can be additionally configured with SASS variables.

Configuration job

To create a grid instance, you need to define two basic configuration properties — column definitions and data. In the markup above, they are listed as columnDefs and rowData properties of the component. So, add these properties to the App component:

In the above code, the column definitions contain three columns: “Make”, “Model” and “Price”. Each column entry indicates a title label and a data field that should be displayed in the body of the table. Actual data is specified in rowData as an array of objects. Note that the object fields correspond to the field values ​​in the columnDefs configuration object. This is a way to link configuration and data in ag-Grid.

If you run the example now, you will see the following data:

That’s all! You have just integrated our grid component into your Angular application. Let’s see how easy it is to configure features in the grid.

Related Posts
1 of 26

Install data dynamically

In the above configuration, we used a hard-coded dataset. But in the real world, most of the time we work with data that is on a remote server. Therefore, as soon as we receive data from the server, we need to dynamically update the grid configuration. Thanks to Angular’s data binding mechanism, its implementation is simple. We just need to update the component property associated with the rowData property. In our setup, this is similarly named property of the App component. Please note that the actual data sampling is performed outside the grid component.

So here is an alternative setup:

In the above code, we request data using the Fetch API and dynamically update the rowData property. Angular will pass the new property value to the grid and it will display the new rendered dataset.

If instead of initializing the rowData property with an empty array, you do not specify it at all, the grid will display Loading … until you update the property with a value.

Feature Enable

Sorting, filtering and pagination are some of the most commonly used functions of modern grids. They allow the user to scale a specific set of records, and not work with the entire data set of real applications. Our grid also provides a rich built-in editing experience, so your users can update any record in the data set with just a few clicks.

Angular grid sorting

Enabling sorting in the ag-grid is actually quite simple – all you have to do is set the enableSorting property to true component:


After adding a property, you can sort the grid by clicking on the column headers. Each click toggles upward, downward, and not sorted.

Angular Grid Filtering

As with sorting, enabling filtering is as simple as setting the enableFilter property to true:


When this property is set, the grid will display a small icon when you hover over the title. When you click on it, a pop-up window will be displayed with a user interface for filtering, which allows you to select the type of filter and the text you want to filter.

ag-Grid makes it easy to customize the default user interface and filtering logic to implement your custom use case.

Angular Grid Pagination

To enable pagination in our Angular grid, all you have to do is set the pagination property to true in component:

  [pagination]="true" [rowData]="rowData"   [columnDefs]="columnDefs" &gt; </ag-grid-angular&gt; 

After adding the property, you can navigate the pages using the controls at the bottom of the grid:

By default, a grid uses a page size of 100 records, but it can be easily changed using configuration parameters.

Editable Cells in Angular Grid

To do an Angular grid editing, simply specify editable = true for the specific column definition in the configuration. All entries in this column will be editable. For example, to enable the built-in editing of the price of a car, we need to make the following changes:

columnDefs = [
    {headerName: 'Make', field: 'make'},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Price', field: 'price', editable: true}

And now we can edit the price:

ag-grid comes with a bunch of built-in cell editors, but you can easily create your own if you need to meet your needs.

Build your own Angular app with ag-grid!

I hope this “start-up” guide has clearly shown you how easy it is to integrate and customize our Angular grid.

Now take the next step and start using ag-grid in your project!


This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More