Using Angular Data Grid Part II: Get Started in 5 Steps

igxGrid showcasing live-data update with SignalR

In Part I of the “Using Angular Data Grid” with Ignite UI post, I highlighted things like what the Angular data grid is, why businesses and huge names such as Google, Forbes, Microsoft, HBO use it, what features and functionalities it delivers, and how it can help you redefine the ways you build modern data driven apps. But here in Part II, I will focus right on how to install and get started with Ignite UI for Angular Data Grid in just a few simple and easy steps.

Integration with Angular Schematics

1. Prerequisites — Install NodeJS. Install Visual Studio Code. Node’s goal is to provide a way to build scalable network programs, and VS Code is the development environment where you will do your coding 👩‍💻
2. Install Ignite UI for Angular Grid with Angular CLI — Angular CLI is a tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. With the commands below you will scaffold an Angular App with the Angular Schematics from scratch:

npm install -g @angular/cli           // install angular cli
npm i -g @igniteui/angular-schematics // install IG Schematics
ng new my-project                     // create new ng project

3. Angular Grid — now we can add Grid components to our application using the add command by either using the predefined templates that we provide:

cd my-project                      // go to root of the project
ng add igniteui-angular            // install the library
ng g @igniteui/angular-schematics:c grid newGrid

For other predefined templates or a detailed explanation on how to start with the Ignite UI Angular Schematics, go ahead and check the official documentation.

CLI flow of app creation

After going through the options of the menu you can find the Grid component and choose it. Now use the command below in order to start the app:

npm start

Check our official Getting started guide for more information.

Simple dependencies import

If you already have an application, you can add the Angular Grid by importing its module first in the app.module.ts:

<!-- app.module.ts -->
import { IgxGridModule } from 'igniteui-angular';
@NgModule({
    imports: [
        ...
        IgxGridModule
    ]
})
export class AppModule {}

Now lets import the Grid component though the igniteui-angular package:

import { IgxGridComponent } from 'igniteui-angular';
...
@ViewChild('myGrid', { read: IgxGridComponent })
public grid: IgxGridComponent;

For more information, check out our Getting started with igxGrid section.

Angular Grid Usage

Now that we have the grid module imported, let’s get started with a basic configuration of the igx-grid that binds to local data.

<igx-grid #grid1
   [data]="localData" 
   [autoGenerate]="true">
</igx-grid>

And thats it, you now have a Grid part of your application.

You can create a more advanced configuration by defining a columns collection and using any of the templates that we provide — templates for Cell, Cell Editing, Column Header and etc.

<igx-grid #grid1 
       [data]="data | async" 
       (columnInit)="initColumns($event)"
       (selected)="selectCell($event)" [allowFiltering]="true">
           <igx-column field="Name" [sortable]="true" >
           </igx-column>
           <igx-column field="AthleteNumber" [sortable]="true">        
           </igx-column>
           <igx-column field="TrackProgress">
             <ng-template igxCell let-value>
                <igx-linear-bar 
                    [stripped]="false"
                    [value]="value" 
                    [max]="100">
                </igx-linear-bar>
              </ng-template>
            </igx-column>
    <igx-paginator [perPage]="6">
    </igx-paginator>
</igx-grid>

Enabling features

Filtering, Sorting and Paging are among the most commonly used features of the modern grids. They allow a user to use a particular set of records instead of working with the entire dataset of the applications.

Enabling sorting in ag-Grid is actually quite simple — all you need to do is set the sortable property to true on the <igx-column> component:

<igx-column field="ShipCountry" sortable="true"></igx-column>

Go ahead and check out the other features that are part of the igxGrid — Three types of Filtering, State persistence, Multi-row layout, Cell/Row/Column Selection, Master-Detail View, Rich Keyboard navigation, and a lot more.

Theming

Ignite UI for Angular includes the following themes as part of its package:

• Material
• Bootstrap
• Fluent
• Indigo

In order to start using the default theme, open your src/styles.scss file and add:

<!-- src/styles.scss -->
@import "~minireset.css/minireset";
@import "~igniteui-angular/lib/core/styles/themes/index";
@include igx-core();
@include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale);
@include igx-theme($default-palette);

By default we don’t apply any typography styles. To use our typography in your application you have to set the igx-typography CSS class on a top-level element. All of its children will then use our typography styles. The example below shows how to do

<!-- index.html -->
<body class="igx-typography">
  <app-root></app-root>
</body>

All themes have light and dark variants as well as support for left-to-right(LTR) and right-to-left(RTL) content.

Result

Angular Data Grid

Once you’ve done that, the only thing that’s left is to get an overview of some of the things the Ignite UI for Angular Data Grid provides from a technical side:

✔ High-performance and DOM virtualization

✔ Top architecture and modular design

✔ Code reusability

✔ Rich theming capabilities

✔ Excel similarity and familiarity

✔ Real-time update with technologies like ASP.NET Core SignalR

✔ And a powerful online community

But this represents the Bright side of the Moon (i.e. the obvious benefits of Angular Data Grid component). The Dark side quite often conceals the most crucial aspects like:

✔ The means to operate with data more efficiently

✔ Quick access to updated information

✔ Blazing fast and precise data processing

✔ Advanced filtering options, charting, and more functionalities

✔ Getting insights, while using built-in analytics tools

✔ 30+ Features, like — Three types of Filtering, State persistence, Multi-row layout, Cell/Row/Column Selection, Master-Detail View, Rich Keyboard navigation and a lot more.

They, in fact, are some of the biggest advantages of Ignite UI for Angular Data Grid when creating large-scale ERP systems, CRMs, platforms for payment processes, inventory management apps, and other data-driven projects for telecommunication companies, investment banks, warehousing and logistics businesses, travel and transportation, and others.

Keeping in mind all the key things mentioned above regarding Angular Data Grid, the advantages of the Ignite UI for Angular, all the features and functionalities that it comes with, one cannot deny the fact that it can surely help you build fast-performing apps and generate better UX. And what’s more, things get even better knowing how easy it is to set it all up and start using the Ignite UI for Angular Data Grid for your next project.

Join all the developers and thousands of companies who use Ignite UI Angular Grid to provide the best possible experience to their users.

Learn more about igxGrid.

Here you can find our Ignite UI for Angular GitHub repository and official documentation.

And you can now watch our latest Angular Data Grid Tutorial, which can further help you learn how to create a full-featured Angular UI Grid from scratch.

Feel free to share in the comments below any questions that you have and check out our Ignite UI for Angular GitHub repository for other powerful Angular components!