How to add Angular grid in Angular 12?

In this tutorial, we’ll learn some of the best libraries for Angular grid implementation. There are plenty of libraries to choice and we might get confused about which one to select and I will list some of them.

Even Angular table and grid seem to same in most cases, both are two dimension layouts containing rows and columns. But Angular grid provides the functionality of page layout without using float and position and creates a responsive page layout.

Angular tables are used to render rows and columns of data and allow users to interact with sorting, filtering, and exporting data and in cell-editing.

Some of best Angular grid libraries

We’ll learn some of the most popular libraries for the Angular grid. We had a list below, in which you can select a library based on your UI and requirement. We can’t say any library is best among others, each one has its own pro and cons.

NameDescription
Angular material gridAngular material comes with a grid component for creating a grid layout. If you’re using Material UI, then I guess it is the best choice to use.
generic-ui/ngx-grid
Generic UI Grid is one of the best free angular grid libraries. It also offers pagination, sorting, column configuration, and more. It has a 9.18 MB package size and a weekly download of 281 approximately
ag-grid-angularAG Grid is a fully-featured and highly customizable JavaScript data grid. It has both a pro and a free package. The community package has all features required for the grid. It has 2.26 MB and a weekly download of 99,664 approximately.
Telerik KendoUI GridOne of the real strengths of Kendo UI is the grid component. Kendo UI Core is the only open-source and the Kendo suite is released within a commercial license,
ng-bootstrapThe ng-bootstrap doesn’t have a dedicated grid component, we can use Bootstrap’s grid system, which uses a series of containers, rows, and columns to layout and align content. It’s built with a flexbox and is fully responsive.

Setting up and configure Angular grid project

Let first create our Angular grid project and before starting an angular project you need to install nodejs and Angular CLI in your system. We’ll demonstrate an Angular grid example using the ag-grid-angular library.

ng new gridApp
cd gridApp
npm i --save ag-grid-community ag-grid-angular
ag grid angular - Angular grid

To use ag grid angular, we need to import AgGridModule in our application the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AgGridModule } from 'ag-grid-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgGridModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The ag-grid Angular library provides a lot of themes options to select, to use a particular theme we need to import in style.scss In our example we use ag-theme-blue themes for this example and you can select a theme of your choice.

@import "~ag-grid-community/dist/styles/ag-grid.scss";
@import "~ag-grid-community/dist/styles/ag-theme-blue.css";
// @import "~ag-grid-community/dist/styles/ag-theme-material.css";
// @import "~ag-grid-community/dist/styles/ag-theme-bootstrap.css";

When we open node_modules of ag-grid-community we can have these option themes available to choose.

ag-grid Angular theme example

Ag grid angular example

We have completed the configuration of ag grid angular project. Let demonstrate an example of it by editing the app component typescript or template file.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  columnDefs = [
    { headerName: 'Name', field: 'name' },
    { headerName: 'Area', field: 'area' },
    { headerName: 'Population', field: 'population' }
  ];

  countries = [
    {
      name: "France",
      area: 640679,
      population: 64979548,
    },
    {
      name: "India",
      area: 3287263,
      "population": 1324171354,
    },
    {
      name: "Germany",
      area: 357114,
      population: 82114224,
    },
    {
      name: 'Canada',
      area: 9976140,
      population: 36624199
    },
    {
      name: 'United States',
      area: 9629091,
      population: 324459463
    },
  ];
}
<ag-grid-angular style="width: 55%; height: 170px;" class="ag-theme-blue" 
  [rowData]="countries" [columnDefs]="columnDefs">
</ag-grid-angular>

In the ag-grid-angular component, we need to add the theme name in the class of this component.

Angular grid example using bootstrap

The ng-bootstrap doesn’t have a grid component built for Angular. But we can use the Bootstrap grid system using rows and cols class. This is a mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve-column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Angular grid example

In above example is responsive, we can control how much width to allocate to each column and we can control what column to display or not based on device size. In our example, we are hiding the description column in small and below it.

On the small screen, we have allocated all fields with 3 column width. In the middle and larger screen, we have 2 columns for all fields except the description we allocated 4 column width.

Let edit the app.component.ts file to add our countries array object.

 countries: any = [
    {
      name: "France",
      flag: "c/c3/Flag_of_France.svg",
     area: 640679,
     population: 64979548,
     description: "France, the largest country in Western Europe, has long been a gateway between the continent's northern and southern regions."
    },
    {
     name: "India",
     flag: "4/41/Flag_of_India.svg",
     area: 3287263,
     population: 1324171354,
     description: "India (Hindi: Bhārat), officially the Republic of India (Hindi: Bhārat Gaṇarājya) is a country in South Asia."
    },
    {
     name: "Germany",
     flag: "b/ba/Flag_of_Germany.svg",
     area: 357114,
     population: 82114224,
     description: "Germany is a country located in the heart of Western Europe."
    }
  ]

In the app.component.html template let add Bootstrap grid system of using rows and columns.

<section>
  <div class="row grid-title">
    <div class="col-3 col-md-2">Flag</div>
    <div class="col-3 col-md-2">Country</div>
    <div class="col-3 col-md-2">Area</div>
    <div class="col-3 col-md-2">Population</div>
    <div class="col-md-4 d-sm-none d-md-block d-sm-block">Description</div>
  </div>
  <div class="row grid-row"  *ngFor="let country of countries">
   <div class="col-3 col-md-2">
     <img [src]="'https://upload.wikimedia.org/wikipedia/commons/'+country.flag" 
      style="width: 20px">
   </div>
   <div class="col-3 col-md-2">{{ country.name }}</div>
   <div class="col-3 col-md-2">{{ country.area }}</div>
   <div class="col-3 col-md-2">{{ country.population }}</div>
   <div class="col-3 col-md-4 d-none d-md-block">{{ country.description }}</div>
 </div>
</section>

We have also applied style for our bootstrap row, let add style for it.

div.grid-title {
    background-color: blue;
    color: white;
}

div.grid-row {
    background-color:ivory;
    border-bottom: 1px solid blue;
}

We have articles on how to add Angular grid using Angular material grid with an example.

Conclusion
We have completed our Angular grid with examples, there are plenty of libraries to choose to create a grid in the angular project. Based on your need and UI, select the Angular grid system.

Related Articles

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top