Angular Spreadsheet

The Angular Spreadsheet component allows visualizing and editing of spreadsheet data. Features include activation, cell editing, conditional formatting, selection, clipboard.



When installing the spreadsheet package, the core and excel package must also be installed.

  • npm install --save igniteui-angular-core
  • npm install --save igniteui-angular-excel
  • npm install --save igniteui-angular-spreadsheet

Required Modules

The IgxSpreadsheetComponent requires the following modules:

import { IgxExcelModule } from 'igniteui-angular-excel';
import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet';

    imports: [
        // ...
        // ...
export class AppModule {}


Now that the spreadsheet module is imported, next is the basic configuration of the spreadsheet.

<igx-spreadsheet #spreadsheet height="500px" width="100%">

In the following code snippet, an external ExcelUtility class is used to save and load a workbook.

The following demonstrates how to load a workbook into the spreadsheet

import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
import { ExcelUtility } from 'ExcelUtility';

// ...

@ViewChild("spreadsheet", { read: IgxSpreadsheetComponent })
public spreadsheet: IgxSpreadsheetComponent;

ngOnInit() {
    const excelFile = '../../assets/Sample1.xlsx';
    ExcelUtility.loadFromUrl(excelFile).then((w) => {
      this.spreadsheet.workbook = w;