Angular 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.

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

Component Modules

The IgxSpreadsheetComponent requires the following modules:

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

@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>

[!Note]

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