Datagrids have been one of the most common visual software elements since the advent of UIs themselves. They appeal to the instinct that drives all of us to take in and understand as much data as possible, as quickly as possible. Datagrids are more useful than ever, not only for displaying data but also for editing it. With automatic conveniences like sorting and autocomplete and advanced features like custom formulas, Microsoft Excel would be the natural choice for most users. Users choose excel because it is familiar. Although Excel has become the most common example of software using a datagrid, the paradigm has increased throughout the software field. As web apps continue to replace the traditional native applications we're used to, it only makes sense that datagrids would make their way to web app UIs. Plenty of JavaScript datagrids exist in the market: open-source, third-party, and homegrown. Which to choose? In another one of our blogs, we discussed what makes datagrids so useful as UI elements and why FlexGrid is the best Angular datagrid. You can see Wijmo's in action and learn more about it through our sample. Angular DataGrid Angular datagrid overview You can get your copy of Wijmo from , from our , or by . NPM CDN downloading it from our site All this sounds amazing, right? Let's put FlexGrid to work by building a customizable Angular datagrid in minutes. We'll use the following to demonstrate how to use FlexGrid with Angular, Google's web framework: application Angular Sample App. We use to create the sample, so it is easy to maintain and share. Stackblitz Let's get started! Download Now! How to Create the Angular App To create your copy of the app, follow these steps: Open Stackblitz Click the "Angular/TypeScript" button at the top of the screen Add Wijmo to the project by typing "@grapecity/wijmo.all" into the dependencies list How to Import the Required Modules In the Angular version of the app, the logic is contained within the app.component.ts file, and the markup is contained within the app.component.html file. We'll start by importing the required classes and styles from Angular and Wijmo: app.module.ts import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { WjGridFilterModule } from '@grapecity/wijmo.angular2.grid.filter';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    WjGridModule,
    WjGridFilterModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { } app.component.ts import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as WjCore from '@grapecity/wijmo'; styles.css @import "wijmo/styles/themes/wijmo.theme.material.css"; Notice how, in addition to the modules, the code imports some CSS. In this case, we chose Wijmo's material theme, one of several included with Wijmo. Styling the App To style the app, edit the styles.css file as follows: body {
  font-family: Lato, Arial, Helvetica;
}
.wj-flexgrid { /* limit the grid's width and height */
  max-height: 300px;
  max-width: 32em;
} Our data source will be stored within our file, whichis defined as follows: app.component.ts import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as WjCore from '@grapecity/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
  // the data is stored in a https://jsonbin.io/ public repo
  constructor(private http: HttpClient) {
    this.http.get('https://api.jsonbin.io/b/5f0765bc5d4af74b01295f26')
      .subscribe(data => {
        this.data.sourceCollection = data;
      });
  }
} The file exposes the data through its "data" property, a CollectionView grouped by make. The data is loaded asynchronously after the component is constructed. app.component.ts When the data is received, it is assigned to the CollectionView's sourceCollection property and becomes available to the application. How to Visualize the Data in Angular The final step is implementing the markup inside of the file to render the Angular DataGrid: app.component.html <h1>
  2021 Sedans (Angular)
</h1>
<p>
  Sort by model and price by clicking the column headers.
  Filter by value or condition by clicking the filter icons
  in the column headers.
  Collapse and expand makes to see all the models.
  Select one or more models with the mouse or keyboard and
  copy your selection to the clipboard.</p>
<p>
  Showing
  <b>{{data.items.length}}</b> models from
  <b>{{data.groups.length}}</b> makes.
</p>
<wj-flex-grid [allowResizing]="'None'" [showAlternatingRows]="false" [isReadOnly]="true" [selectionMode]="'ListBox'"
  [headersVisibility]="'Column'" [itemsSource]="data">
  <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'" [aggregate]="'Avg'" [width]="'.5*'"></wj-flex-grid-column>
  <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 "FlexGrid" element, which initializes the grid's properties, including the , the columns to display, and their properties. itemsSource The column properties include the binding, header, format, and width for each column. Note that the property on the price column causes the grid to show the average price for each make in the group headers. aggregate The "FlexGrid" element contains a "FlexGridFilter" element, which adds the column filter so that users may filter the grid data by model and price. We've also included some data bindings connected to the CollectionView, which we use to show how many makes and models are being displayed in the FlexGrid, based on the filters the user has applied. How to Run the Application That's it! . The Angular version of the "2021 Sedans" app is ready Happy coding! If you have questions or comments, be sure to enter them below. Download Now!

Google

Microsoft

Importing, Exporting CSV and Excel XLSX in .NET C# Applications

Learn More About MESCIUS' Line of Products!

Too Long; Didn't Read

Make resilience your competitive advantage

Quickly Create an Angular Datagrid in Your Web Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Ways to Add Security to Excel & PDF with .NET Document APIs

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

5 Ways to Add Security to Excel & PDF with .NET Document APIs

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps