(Showing Draft Content)

Angular DataGrid Quick Start

This guide will help you quickly create your first Angular DataGrid, by using Wijmo's FlexGrid component.

Creating Your First Angular DataGrid

Start leveraging the power of an Angular DataGrid with these few steps:

1. Install packages from npm

npm install @mescius/wijmo.angular2.all

2. Importing the Grid and Data

Here we will import the required modules and define some data to be bound in our Angular DataGrid.

import { Component } from '@angular/core';
import { WjGridModule, WjFlexGrid } from '@mescius/wijmo.angular2.grid';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
    data: any[];
    @ViewChild('flex') flex: WjFlexGrid;

    constructor() {
        this.data = [
            { id: 0, country: "US", sales: 1318.37, expenses: 4212.41 },
            { id: 1, country: "Germany", sales: 5847.95, expenses: 89.79 },
            { id: 2, country: "UK", sales: 502.55, expenses: 2878.50 },
            { id: 3, country: "Japan", sales: 4675.40, expenses: 488.65 },
            { id: 4, country: "Italy", sales: 2117.57, expenses: 925.60 },
            { id: 5, country: "Greece", sales: 322.10, expenses: 4163.96 }

    imports: [WjGridModule, BrowserModule],
    declarations: [AppComponent]
export class AppModule {

3. Add Angular DataGrid Markup

You can use markup to declare all options of FlexGrid in Angular. Here we will declare the FlexGrid and its columns.

<wj-flex-grid #flex [itemsSource]="data" style="height: 500px;">
  <wj-flex-grid-column [header]="'Country'" [binding]="'country'"></wj-flex-grid-column>
  <wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" format="n2"></wj-flex-grid-column>
  <wj-flex-grid-column [header]="'Expenses'" [binding]="'expenses'" format="n2"></wj-flex-grid-column>

4. Adding Wijmo css

For Wijmo controls to look and work correctly, you need to load Wijmo CSS files into your application. The styles are shipped in the @mescius/wijmo.styles npm package.

You can load styles in your Angular CLI application by adding this import statement to the top of the default styles.css file:

@import '@mescius/wijmo.styles/wijmo.css';

5. Run the Angular DataGrid

Thats it! Just run your application and see your Angular DataGrid in action.

JSCodeMine Sample:Angular DataGrid Quick Start
Edit Codemine Block
Edit in JS CodeMine