Angular DataGrid Quick Start

This guide will help you quickly create your first Angular DataGrid using Wijmo's FlexGrid as a standalone Angular component.

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
Add the required Wijmo module in the imports array.

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

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, WjGridModule],
    templateUrl: './app.component.html',
    styleUrl: './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 }
        ];
    }
    init = () => {
        console.log(this.flex);
    }
}

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;" (initialized)="init()"> 
<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> 
</wj-flex-grid>

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

codemineBlock