Spread.Sheets Documentation
Understanding the Sheet Element
Spread.Sheets Documentation > Developer's Guide > Working with JavaScript Frameworks > Using Spread.Sheets with Angular > 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