Angular DataGrid Quick Start

Wijmo and its high-performance UI components integrate seamlessly with the most popular JavaScript framework, Angular. The latest version of Wijmo supports all the latest versions of Angular starting from 13.* version.

Wijmo Angular components leverage the TypeScript class inheritance and extend the control classes they represent. This means that when you reference a Wijmo component, the instance you access is both a Wijmo control (with all its properties, events, and methods), and an Angular component at the same time. These components also integrate smoothly with Angular’s data binding system, supporting both one-way and two-way bindings, as well as event handling.

Since Wijmo controls, Angular components, and Angular are all built with TypeScript, they work together naturally, ensuring a consistent and efficient development experience.

In this section, we talk about Wijmo Angular 2 components, Angular markup syntax and provide a quick start guide to help you add Wijmo components to your Angular applications.

Angular Quick Start

This topic walks you through setting up Wijmo with an Angular project. For demonstration purpose, we are using Wijmo's FlexGrid as a standalone Angular component and see how to create an Angular DataGrid.

Note that, in this topic, we assume that the user understands how to create an Angular application using Angular CLI. For more information, read Angular CLI on Angular’s official website.

1. Install Wijmo Packages

2. Import Wijmo Components and data

3. Add Angular DataGrid Markup

Install Wijmo Packages

1. Open your angular application and switch to the application folder where you want to install the package.

2. Install Wijmo Angular packages by using the following command: npm install @mescius/wijmo.angular2.all

Import Wijmo Modules and Data

1. Import the required modules.

2. Include Wijmo modules in the import array. For our FlexGrid example, we are including the following in app.component.ts file.

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

3. Define data to be bound with Angular Datagrid.

   @Component({
   selector: 'app-root',
   standalone: true,
   imports: [WjGridModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
   })
   export class AppComponent {
   selectedItem: any;
   flexInitialized(_t5: WjFlexGrid) {
   throw new Error('Method not implemented.');
   }
   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);}}

4. In styles.css file, add the following import statement to load styles in the Angular CLI application.

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

Adding Angular DataGrid Markup

Use markup to declare all FlexGrid options in Angular.

In this example, we are adding the Angular DataGrid Markup and declaring the FlexGrid and its columns in the app.component.html file. For information on Angular Markup Syntax and Event Initializing, see Angular Components.

<wj-flex-grid #flex[itemsSource]="data"(initialized)="flexInitialized(flex)">
<wj-flex-grid-column [header]="'Country'" [binding]="'country'" width="2*">
</wj-flex-grid-column><wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" width="*" format="n2">
</wj-flex-grid-column><wj-flex-grid-column [header]="'Expenses'" [binding]="'expenses'" width="*" format="n2">
</wj-flex-grid-column>
</wj-flex-grid>

Configuring Zone.js for Existing Projects

If you are adding Wijmo to an existing Angular 21 application that was created with the default Zoneless change detection, follow these steps to restore Zone.js:

1. Install zone.js

npm install zone.js

2. Add zone.js to angular.json polyfills

   Open your angular.json and add zone.js to the polyfills array in both the build and test targets:

{
    "projects": {
        "my-wijmo-app": {
            "architect": {
                "build": {
                    "options": {
                        "polyfills": ["zone.js"]
                    }
                },
                "test": {
                    "options": {
                        "polyfills": ["zone.js", "zone.js/testing"]
                    }
                }
            }
        }
    }
}

3. Replace provideExperimentalZonelessChangeDetection with provideZoneChangeDetection

   Open your app.config.ts and replace the change detection provider:

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
export const appConfig: ApplicationConfig = {
    providers: [
        provideZoneChangeDetection({ eventCoalescing: true })
    ]
};

Run the application to observe the Wijmo FlexGrid successfully integrated into your Angular application. To explore additional user-friendly Wijmo components like charts, input controls, and pivot grids, see Wijmo Demos.