Four simple steps to working with Ignite UI for Angular Grid and REST Service.

Dhananjay Kumar / Monday, April 23, 2018

This article will help you in adding an Ignite UI for Angular grid in an Angular application. You can scaffold Ignite UI for Angular Grid using Ignite UI CLI also. However, this article will focus on showing you steps to add a grid in the Angular application. You will also learn to bind grid with external REST API. Here I am assuming that you already have an Angular project. If you do not have, you can create using Angular CLI. Once your project is ready, follow the steps as mentioned below:

Step 1: Add Ignite UI for Angular library

Let us start with adding the Ignite UI for Angular library in the project. We can use npm to do this. So run the command shown below to install Ignite UI for Angular

npm install igniteui-angular

After installing Ignite UI for Angular, we need to install hammerjs. To install hammerjs run command as below:

npm install hammerjs

After installing Ignite UI for Angular, let’s make sure that the project references the Ignite UI for Angular styles and the hammerjs library in the angular-cli.json. Modify angular-cli.json as shown below:

angular-cli.json

"prefix": "app",
    "styles": [
        "styles.css",
        "../node_modules/igniteui-angular/styles/igniteui-angular.css"
    ],
        "scripts": ["../node_modules/hammerjs/hammer.min.js"],

Ignite UI for Angular styles uses the Material Icons. Let us import those in the styles.css as shown below:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

After that import hammerjs in main.ts as shown below:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import 'hammerjs';

Step 2: Import required modules

To work with the Ignite UI for Angular grid, you need to import following modules in app.module.ts

import {
    IgxGridModule
} from 'igniteui-angular/main';

Then pass it in imports array as shown in below listing:

imports: [
    BrowserModule,
    FormsModule,
    IgxGridModule.forRoot()
],

Step 3: Create data source

Ignite UI for Angular grid needs a data source. You can have a data source

Local data source
REST API

In a real-time scenario, it will bind to REST API for the data source. You can use Angular services to consume REST API and create a data source for igxGrid. Let us assume that we want to bind to a Contact data source.

To work with Contact data source, first add an entity, which will represent Contact.

contactentity.ts

export interface ContactEntity {
    Id: string;
    FirstName: string;
    LastName: string;
    Company: string;
    Address: string;
    City: string;
    County: string;
    State: string;
    Postcode: number;
    Country: string;
    Phone1: string;
    Phone2: string;
    Email: string;
    Web: string;
}

Create an Angular service to consume REST API as shown in the below listing:

app.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/map';
import { ContactEntity } from './contactentity';
 
@Injectable()
export class AppService {
 
    private contactsapiurl = 'https://adapttableapi.azurewebsites.net/api/contacts';
    constructor(private http: HttpClient) { }
    getContacts(): Observable<ContactEntity[]> {
        return this.http.get<ContactEntity[]>(this.contactsapiurl);
    }
 
}

Here, I am consuming a hosted API using Angular HTTP service. Now we can use this service in component class as below:

export class AppComponent implements OnInit {
    title = 'app';
    data: ContactEntity[] = [];
 
    constructor(private service: AppService) {
    }
 
    ngOnInit() {
        this.service.getContacts().subscribe(t => {
            this.data = t;
            console.log(this.data);
        });
    }

Also, do not forget to pass import AppService and ContactEntity in component class as shown in the listing below:

import { AppComponent } from './app.component';
import { AppService } from './app.service';

In AppModule class pass AppService in provide array as shown below:

imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    IgxGridModule.forRoot()
],
    providers: [AppService],
        bootstrap: [AppComponent]

In this step, you have consumed REST API and brought data into the component.

Step 4: Add Ignite UI Grid

We have data in the component class. Next, we can create igxGrid by just adding <igx-grid></igx-grid> on the template. You can set up all properties of igxGrid declaratively in either template or use the code in the component class. You can set such as such as many properties

Data
Height
Width
Auto-generated
Pagination
Sorting
Searching
Columns
Columns header template
Columns template
Pagination template

There are many more. However, basic properties you must set to work with igxGrid are:

Data
Height [optional]
Width [optional]
Autogenerated
Columns

Let us add a grid as shown in the listing below:

<igx-grid # grid1 id="grid1" [data]="data"
          [width]="'1400px'"
          [height]="'600px'"
          [autoGenerate]="false">
 
 </igx-grid >

We have set the autoGenerate property to false; hence, we need to configure columns. Columns can be added using igx-column element, which has these primary properties

Width
Field
datatype
header

Besides above properties, you can have header template, column template, etc. Column field property must be set to JSON object property, which would be displayed in the particular column. We can add columns to the grid as below:

<igx-grid #grid1 id="grid1" [data]="data"
           [width]="'1400px'"
           [height]="'600px'"
           [autoGenerate]="false">
     <igx-column width="90px" field="Id" header="Id" dataType="string"></igx-column>
     <igx-column width="220px" field="FirstName" header="First Name" dataType="string"></igx-column>
     <igx-column width="220px" field="LastName" header="Last Name" dataType="string"></igx-column>
     <igx-column width="250px" field="Company" header="Company" dataType="string"></igx-column>
     <igx-column width="250px" field="Address" header="Address" dataType="string"></igx-column>
     <igx-column width="150px" field="City" header="City" dataType="string"></igx-column>
     <igx-column width="150px" field="County" header="County" dataType="string"></igx-column>
     <igx-column width="150px" field="State" header="State" dataType="string"></igx-column>
     <igx-column width="120px" field="Postcode" header="Postcode" dataType="number"></igx-column>
     <igx-column width="150px" field="Country" header="Country" dataType="string"></igx-column>
     <igx-column width="120px" field="Phone1" header="Phone1" dataType="string"></igx-column>
     <igx-column width="120px" field="Phone2" header="Phone2" dataType="string"></igx-column>
     <igx-column width="220px" field="Email" header="Email" dataType="string"></igx-column>
     <igx-column width="300px" field="Web" header="Web" dataType="string"></igx-column>
 </igx-grid>

We have set height, width, autoGenrate properties of the grid along with data property, which is set to data source we created in the component class. You can very quickly configure the grid for features such as pagination, sorting, filtering, etc. we may cover that in next articles.

Run application

Now when you run the application, you will find grid added to application and bind data coming from external REST API as shown in the image below:

Here you have Ignite UI for Angular Grid running in an application which is a bind to a REST API. In next articles, we will learn to configure features such as paging, sorting, filtering, virtualization, etc. on the grid. If you like this post, please share it. Also, if you have not checked out Infragistics Ignite UI for Angular Components, be sure to do so! They have 30+ material based Angular components to help you code web apps faster.