Angular Spreadsheet

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

Demo

Dependencies

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

@NgModule({
    imports: [
        // ...
        IgxExcelModule,
        IgxSpreadsheetModule,
        // ...
    ]
})
export class AppModule {}

Usage

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

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

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;
    });
}