Build a Customizable Angular Data Grid in Minutes

Angular Data Grids

Data grids have been one of the most common visual software elements since the advent of UIs themselves. They provide a powerful and flexible way to display data in a tabular format. Whether you're building an app to track manufacturing stats or analyze financial data, Wijmo's FlexGrid, will provide the best data grid UX with outstanding performance.

In another post, we discuss what makes data grids so useful as UI elements and why Flexgrid is the best React data grid. Other tutorials discuss how to create a plain JavaScript data grid in minutes how to build a React data grid in minutes, and how to build a Vue data grid. You can see the FlexGrid in action and learn more about it using our Learn Wijmo application. You can get your copy from NPM, from our CDN, or you can download it from our site.

Wijmo supports all major JavaScript frameworks (Angular, React, and Vue) by including thin wrappers that expose the FlexGrid and other Wijmo controls as native framework components. This flexibility ensures you can use the same powerful UI components with whatever framework you choose for your projects.

To demonstrate this, we'll use the implementation of a simple application called "2019 Sedans" using Angular. The purpose is not to compare the frameworks, but to show how FlexGrid and the other Wijmo controls easily and seamlessly integrate with whatever framework you choose.

Let's put FlexGrid to work, building a customizable Angular data grid in minutes.

This is the Angular version of the "2019 Sedans" app:

https://stackblitz.com/edit/angular-abrawp

We used stackblitz to create the sample so it is easy to maintain and share.

Create the Angular App

To create your own copy of the app, follow these steps:

1. Open stackblitz
2. Click the "Angular/TypeScript" button at the bottom of the screen
3. Add Wijmo to the project by typing "wijmo" into the dependencies list:

Import the Required Rodules

The app will use Angular's HttpClient module to load the JSON data asynchronously, and FlexGrid and FlexGridFilter modules to show and filter the data.

To import the modules we need, edit the app.module.ts file as follows:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
import { WjGridFilterModule } from 'wijmo/wijmo.angular2.grid.filter';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    WjGridModule,
    WjGridFilterModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Style the App with CSS

To style the app, edit the styles.css file as follows:

/* styles.css */
@import "wijmo/styles/themes/wijmo.theme.material.css";

body {
  font-family: Lato, Arial, Helvetica;
}
.wj-flexgrid { /* limit the grid's width and height */
  max-height: 300px;
  max-width: 32em;
}

The first line imports a Wijmo CSS file. We chose the material theme for this sample, one of several included with Wijmo.

Add the Data Source

The application loads data from a JSON store and exposes it as a CollectionView. This is done in the app.component.ts file:

// app.component.ts
import { Component from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as WjCore from 'wijmo/wijmo';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  // create our CollectionView
  data = new WjCore.CollectionView([], {
    groupDescriptions: ['make'] // group my make
  });

  // and populate it from the JSON data source
  constructor(private http: HttpClient) {
    this.http.get('https://api.myjson.com/bins/cqvk8')
      .subscribe(data => {
        this.data.sourceCollection = data;
      });
  }
}

The constructor uses Angular's HttpClient to load the data from the data store asynchronously. When the data arrives, it is assigned to the CollectionView's sourceCollection property and becomes available to the application.

Show the Data

The final step is the application UI, defined in the app.component.html file:

<!-- app.component.html -->
<h1>
  2019 Sedans (Angular)</h1>
<p>
  Sort by model and price…</p>

<!-- summary info -->
<p>
  Showing
  <b>\{{data ? data.items.length: 0}}</b> models from
  <b>\{{data ? data.groups.length: 0}}</b> makes.</p>

<!-- define the grid -->
<wj-flex-grid
  [allowResizing]="'None'" 
  [showAlternatingRows]="false"
  [isReadOnly]="true"
  [selectionMode]="'ListBox'"
  [headersVisibility]="'Column'"
  [itemsSource]="data"

  <!-- define the columns -->
  <wj-flex-grid-column 
    [binding]="'make'" [header]="'Make'" [width]="'*'" [visible]="false">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    [binding]="'model'" [header]="'Model'" [width]="'*'">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    [binding]="'price'" [header]="'Price'" [format]="'c0'" [width]="'.5*'"
    [aggregate]="'Avg'">
  </wj-flex-grid-column>

  <!-- add a column filter -->
  <wj-flex-grid-filter></wj-flex-grid-filter>

</wj-flex-grid>

The app header contains a short app description and a summary of how many models and makes are displayed. The summary counts are updated automatically when the user filters the data.

The header is followed by the "wj-flex-grid" element which initializes the grid's properties, including the itemsSource, the columns to display, and their properties.

The column properties include the binding, header, format, and width for each column. Note that the aggregate property on the price column causes the grid to show the average price for each make in the group headers.

The "wj-flex-grid" element contains a "wj-flex-grid-filter" element which adds the column filter, so users may filter the grid data by model and by price.

Run the Application

That's it! The Angular version of the "2019 Sedans" app is ready:

https://stackblitz.com/edit/angular-abrawp

Happy coding! If you have questions or comments be sure to enter them below.

Explore the features of Wijmo's Angular DataGrid here!