Introduction to Angular Grid

Introduction to Angular Grid

In this article, I will introduce ag-Grid for Angular applications. ag-Grid is implemented in TypeScript and can be used for displaying both simple and complex data.

In this article, I will introduce ag-Grid for Angular applications. ag-Grid is implemented in TypeScript and can be used for displaying both simple and complex data.

Adding ag-Grid to Angular project

Create a project using Angular CLI and install ag-grid-community and ag-grid-angular through npm.

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

Import the ag-Grid styles globally in styles.scss.

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

The ag-grid.css imports Gird styles and ag-theme-blue.css is one of the available grid themes. There are many themes available within the module. You can either choose the one that matches your project design or customize styles through Sass variables.

Let’s include the module app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

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

Here, *withComponents *call is required to use Angular components by the grid.

Add the grid definition in app.component.ts.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Angular ag-Grid';

  columnDefs = [
        { headerName: 'Employee Name', field: 'name' },
        { headerName: 'Title', field: 'title' },
        { headerName: 'Employee Number', field: 'number' },
        { headerName: 'Date of Joining', field: 'date’  }
    ];

    rowData = [
        { name: 'John', title: 'Software Engineer', number: 123456, date: 'March 02, 2016' },
        { name: 'Jane', title: 'Senior Software Engineer', number: 123451, date: 'April 01, 2014' },
        { name: 'Richard', title: 'Software Engineer', number: 123452, date: 'January 02, 2015' },
        { name: 'Janie', title: 'Software Engineer', number: 123453, date: 'March 23, 2016' },
        { name: 'Johnny', title: 'Senior Software Engineer', number: 123454, date: 'September 01, 2017' }
    ];
}

We just added two properties i.e., column definitions and row data. Note that the row data can also be dynamically loaded. More information about column definition can be found here.

Let’s add the grid component on app.component.html. Here is the complete HTML file.

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<ag-grid-angular
    style="width: 800px; height: 155px; margin: auto"
    class="ag-theme-blue"
    [rowData]="rowData"
    [columnDefs]="columnDefs">
</ag-grid-angular>

<router-outlet></router-outlet>

It is possible to add sort and filter features on the grid. Just add the feature in column definition as follows.

columnDefs = [
        { headerName: 'Employee Name', field: 'name', sortable:true, filter:true },
        { headerName: 'Title', field: 'title', sortable:true, filter:true },
        { headerName: 'Employee Number', field: 'number', sortable:true, filter:true },
        { headerName: 'Date of Joining', field: 'date', sortable:true, filter:true }
    ];

We can also add checkbox selection and multiple row selections to the grid.

columnDefs = [
        { headerName: 'Employee Name', field: 'name', sortable:true, filter:true, checkboxSelection: true },
        { headerName: 'Title', field: 'title', sortable:true, filter:true },
        { headerName: 'Employee Number', field: 'number', sortable:true, filter:true },
        { headerName: 'Date of Joining', field: 'date', sortable:true, filter:true }
    ];

In the HTML, just add rowselection property.

<ag-grid-angular
    style="width: 800px; height: 155px; margin: auto"
    class="ag-theme-blue"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    rowSelection="multiple">
</ag-grid-angular>

Let us run ng serve command to see our little app. Here is the final app that shows ag-Grid.

Conclusion

ag-Grid has much more features to offer and it is easy to integrate in Angular projects. Checkout their complete documentation here. The complete example for this article can be found on my GitHub repository.

Thanks for reading

angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

How to Upgrade Angular 8 To Angular 9

Angular is currently the most popular JavaScript framework and is used by several expert developers when developing single-page applications or powerful web apps. It has become quite crucial for the developers of Angular to add more features to the framework and fix the bugs . Let's learn how to upgrade Angular 8 to Angular 9 using CLI.

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica