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 https://angular.io/cli.

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";

@Component({
  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() {
    this.gridInstance.downloadDataAsCSV();
  }
}

View this example on Codesandbox.