Angular Spreadsheet

The Angular Spreadsheet is a Angular component that 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/ES5/igx-excel-module";
import { IgxSpreadsheetModule } from "igniteui-angular-spreadsheet/ES5/igx-spreadsheet-module";

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

The following demonstrates how to load a workbook into the spreadsheet

import { IgxSpreadsheetComponent } from "igniteui-angular-spreadsheet/ES5/igx-spreadsheet-component";
import { ExcelUtility } from './../utilities/excel-utility';


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

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