| Spread.Sheets Documentation > Developer's Guide > Managing Data > Using Spread.Sheets with Angular 2 > Understanding the Sheet Element |
The following table lists all the items in the gc-spread-sheets element.
| Attribute | Spread.Sheets API | Type | Comments |
|---|---|---|---|
| name | Workbook.name | string | |
| allowUserZoom | Workbook.options.allowUserZoom = value | boolean | |
| allowUserResize | Workbook.options.allowUserResize = value | boolean | |
| tabStripVisible | Workbook.options.tabstripvisible = value | boolean | |
| tabEditable | Workbook.options.tabEditable = value | boolean | |
| newTabVisible | Workbook.options.newTabVisible = value | boolean | |
| allowUserEditFormula | Workbook.options.allowUserEditFormula = value | boolean | |
| autoFitType | Workbook.options.autofittype = value | GC.Spread.Sheets.AutoFitType | |
| allowUserDragFill | Workbook.options.allowUserDragfill = value | boolean | |
| allowUserDragDrop | Workbook.options.allowUserDragDrop = value | boolean | |
| highlightInvalidData | Workbook.options.highlightInvalidData = value | boolean | |
| referenceStyle | Workbook.options.referenceStyle = value | GC.Spread.Sheets.ReferenceStyle | |
| backColor | Workbook.options.backColor = value | string | |
| grayAreaBackColor | Workbook.options.grayAreaBackColor = value | string | |
| backgroundImage | Workbook.options.backgroundImage = value | string | |
| backgroundImageLayout | Workbook.options.backgroundImageLayout = value | GC.Spread.Sheets.ImageLayout | |
| showVerticalScrollbar | Workbook.options.showVerticalScrollbar = value | boolean | |
| showHorizontalScrollbar | Workbook.options.showHorizontalScrollbar = value | boolean | |
| ShowScrollTip | Workbook.options.showScrollTip = value | GC.Spread.Sheets.ShowScrollTip | |
| ShowResizeTip | Workbook.options.showResizeTip = value | GC.Spread.Sheets.ShowResizeTip | |
| showDragDropTip | Workbook.options.showDragDropTip = value | boolean | |
| showDragFillTip | Workbook.options.showDragFillTip = value | boolean | |
| hostStyle | any | The host element style, the same as the angular’s style binding (such as width: 400px, height: 600px}. | |
| hostClass | string | The class name of the host element. |
The following example shows how to use the sheet element:
| JavaScript |
Copy Code
|
|---|---|
| @Component({ selector: 'my-app', template: `<gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle"> </gc-spread-sheets>`, }) export class AppComponent { spreadBackColor = 'aliceblue'; hostStyle = { width: '800px', height: '600px' }; } |
|
The following table lists the sheet events:
| Attribute | Spread.Sheets API | Comments |
|---|---|---|
| workbookInitialized | Returns the workbook instance, args {spread: workbook} | |
| validationError | GC.Spread.Sheets.Events.ValidationError | |
| cellClick | GC.Spread.Sheets.Events.CellClick | |
| cellDoubleClick | GC.Spread.Sheets.Events.CellDoubleClick | |
| enterCell | GC.Spread.Sheets.Events.EnterCell | |
| leaveCell | GC.Spread.Sheets.Events.LeaveCell | |
| valueChanged | GC.Spread.Sheets.Events.ValueChanged | |
| topRowChanged | GC.Spread.Sheets.Events.TopRowChanged | |
| leftColumnChanged | GC.Spread.Sheets.Events.LeftColumnChanged | |
| invalidOperation | GC.Spread.Sheets.Events.InvalidOperation | |
| rangeFiltering | GC.Spread.Sheets.Events.RangeFiltering | |
| rangeFiltered | GC.Spread.Sheets.Events.RangeFiltered | |
| tableFiltering | GC.Spread.Sheets.Events.TableFiltering | |
| tableFiltered | GC.Spread.Sheets.Events.TableFiltered | |
| rangeSorting | GC.Spread.Sheets.Events.RangeSorting | |
| rangeSorted | GC.Spread.Sheets.Events.RangeSorted | |
| clipboardChanging | GC.Spread.Sheets.Events.ClipboardChanging | |
| clipboardChanged | GC.Spread.Sheets.Events.ClipboardChanged | |
| clipboardPasting | GC.Spread.Sheets.Events.ClipboardPasting | |
| clipboardPasted | GC.Spread.Sheets.Events.ClipboardPasted | |
| columnWidthChanging | GC.Spread.Sheets.Events.ColumnWidthChanging | |
| columnWidthChanged | GC.Spread.Sheets.Events.ColumnWidthChanged | |
| rowHeightChanging | GC.Spread.Sheets.Events.RowHeightChanging | |
| rowHeightChanged | GC.Spread.Sheets.Events.RowHeightChanged | |
| dragDropBlock | GC.Spread.Sheets.Events.DragDropBlock | |
| dragDropBlockCompleted | GC.Spread.Sheets.Events.DragDropBlockCompleted | |
| dragFillBlock | GC.Spread.Sheets.Events.DragFillBlock | |
| dragFillBlockCompleted | GC.Spread.Sheets.Events.DragFillBlockCompleted | |
| editStarting | GC.Spread.Sheets.Events.EditStarting | |
| editChange | GC.Spread.Sheets.Events.EditChange | |
| editEnding | GC.Spread.Sheets.Events.EditEnding | |
| editEnd | GC.Spread.Sheets.Events.EditEnd | |
| editEnded | GC.Spread.Sheets.Events.EditEnded | |
| rangeGroupStateChanging | GC.Spread.Sheets.Events.RangeGroupStateChanging | |
| rangeGroupStateChanged | GC.Spread.Sheets.Events.RangeGroupStateChanged | |
| selectionChanging | GC.Spread.Sheets.Events.SelectionChanging | |
| selectionChanged | GC.Spread.Sheets.Events.SelectionChanged | |
| sheetTabClick | GC.Spread.Sheets.Events.SheetTabClick | |
| sheetTabDoubleClick | GC.Spread.Sheets.Events.SheetTabDoubleClick | |
| sheetNameChanging | GC.Spread.Sheets.Events.SheetNameChanging | |
| sheetNameChanged | GC.Spread.Sheets.Events.SheetNameChanged | |
| userZooming | GC.Spread.Sheets.Events.UserZooming | |
| userFormulaEntered | GC.Spread.Sheets.Events.UserFormulaEntered | |
| cellChanged | GC.Spread.Sheets.Events.CellChanged | |
| columnChanged | GC.Spread.Sheets.Events.ColumnChanged | |
| rowChanged | GC.Spread.Sheets.Events.RowChanged | |
| activeSheetChanging | GC.Spread.Sheets.Events.ActiveSheetChanging | |
| activeSheetChanged | GC.Spread.Sheets.Events.ActiveSheetChanged | |
| sparklineChanged | GC.Spread.Sheets.Events.SparklineChanged | |
| rangeChanged | GC.Spread.Sheets.Events.RangeChanged | |
| buttonClicked | GC.Spread.Sheets.Events.ButtonClicked | |
| editorStatusChanged | GC.Spread.Sheets.Events.EditorStatusChanged | |
| floatingObjectChanged | GC.Spread.Sheets.Events.FloatingObjectChanged | |
| floatingObjectSelectionChanged | GC.Spread.Sheets.Events.FloatingObjectSelectionChanged | |
| pictureChanged | GC.Spread.Sheets.Events.PictureChanged | |
| floatingObjectRemoving | GC.Spread.Sheets.Events.FloatingObjectRemoving | |
| floatingObjectRemoved | GC.Spread.Sheets.Events.FloatingObjectRemoved | |
| pictureSelectionChanged | GC.Spread.Sheets.Events.PictureSelectionChanged | |
| floatingObjectLoaded | GC.Spread.Sheets.Events.FloatingObjectLoaded | |
| touchToolStripOpening | GC.Spread.Sheets.Events.TouchToolStripOpening | |
| commentChanged | GC.Spread.Sheets.Events.CommentChanged | |
| commentRemoving | GC.Spread.Sheets.Events.CommentRemoving | |
| commentRemoved | GC.Spread.Sheets.Events.CommentRemoved | |
| slicerChanged | GC.Spread.Sheets.Events.SlicerChanged |
The following example uses an event:
| JavaScript |
Copy Code
|
|---|---|
| @Component({ selector: 'my-app', template: `<gc-spread-sheets (workbookInitialized)="workbookInit($event)" (validationError)="validationError($event)"> </gc-spread-sheets>`, }) export class AppComponent { workbookInit (args) { //do something } validationError (args) { //do something } } |
|
The following table lists the child elements:
| Child Element | Spread.Sheets API | Count |
|---|---|---|
| gc-worksheet | GC.Spread.Sheets.Worksheet | any |