DataGridXL & Angular

For this demo, we'll be using Angular CLI to build our initial Angular app. If you have trouble following the tutorial steps, please refer to

The article shows how to create an Angular (wrapper) component for DataGridXL and how you can pass events from your DataGridXL instance to your Angular App.

1. Create your Angular app

Open your command prompt and enter these commands.

ng new my-angular-project
cd my-angular-project
ng serve

Open localhost:4200 in your browser window and you should see your default Angular app. It will probably look similar to the screenshot below.


Now, install DataGridXL 2 in the same directory, using npm install.

npm install @datagridxl/datagridxl2

2. Create a DataGrid component

Create a new component or edit the default app.component. Here's what your HTML, CSS and TS files should look like:

<div #grid id="grid"></div>
#grid { height: 400px; }
import { Component, ViewChild, ElementRef } from "@angular/core";
import DataGridXL from "@datagridxl/datagridxl2";

  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
export class AppComponent {
  @ViewChild("grid") grid: ElementRef;
  gridInstance: any;

  ngAfterViewInit() {
    // Create spreadsheet
    this.gridInstance = new DataGridXL(this.grid.nativeElement);

  download() {

View this example on Codesandbox.

Notice that the fullscreen button in Codesandbox raises an error. This is a Codesandbox bug, not a DataGridXL bug. You should not encounter this bug in a real world React app.

Leave email to receive latest updates!