Use the following steps to reference Spread and work with the sheets.
Similar to other libraries, Sheet requires the following included files:
gc.spread.sheets.x.x.x.css
gc.spread.sheets.all.x.x.x.min.js
Create a sheet using the following code (the parameter is the sheet's name).
Add it at the specified position of an existing Spread component.
If you want to remove an existing sheet from the Spread component, use the following code. This example code removes the first sheet in the Spread.
If you want to remove all the sheets in the Spread component, use the convenient clearSheets method.
If you want to customize the sheet's name, use the name methods to get and set the sheet's name.
You can also start editing the active sheet name in the sheet tab by executing the built-in command.
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import GC from '@mescius/spread-sheets';
import './styles.css';
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
dataSource: any[];
spread: GC.Spread.Sheets.Workbook;
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
constructor() {
}
initSpread($event: any) {
this.spread = $event.spread;
}
addSheet () {
let spread = this.spread;
var activeIndex = spread.getActiveSheetIndex();
if (activeIndex >= 0) {
spread.addSheet(activeIndex+1);
spread.setActiveSheetIndex(activeIndex+1);
}
else{
spread.addSheet(0);
spread.setActiveSheetIndex(0);
}
}
removeSheet () {
let spread = this.spread;
if (spread.getSheetCount() > 0) {
spread.removeSheet(spread.getActiveSheetIndex());
}
}
clearSheet () {
let spread = this.spread;
spread.clearSheets();
}
startEditSheetName () {
let spread = this.spread;
spread.commandManager().execute({ cmd: 'startEditSheetName' });
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="panel-title">Sheet Operations</div>
<div class="panel-description">Manage worksheets and start editing the active sheet tab name.</div>
<div class="option-row">
<span>Adds a sheet after the active one.</span>
<input type="button" value="Add Sheet" id="btnAddSheet" (click)="addSheet()"/>
</div>
<div class="option-row">
<span>Removes the active sheet.</span>
<input type="button" value="Remove Sheet" id="btnRemoveSheet" (click)="removeSheet()"/>
</div>
<div class="option-row">
<span>Clears all the sheets from the workbook.</span>
<input type="button" value="Remove All Sheets" id="btnClearSheets" (click)="clearSheet()"/>
</div>
<div class="option-row">
<span>Starts editing the active sheet name.</span>
<input type="button" value="Start Editing" id="btnStartEditSheetName" (click)="startEditSheetName()"/>
</div>
</div>
</div>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.options-container {
float: right;
width: 280px;
padding: 18px 16px;
height: 100%;
box-sizing: border-box;
background: #f7f9fc;
border-left: 1px solid #d7dee8;
overflow: auto;
color: #263445;
}
.panel-title {
margin-bottom: 6px;
color: #172033;
font-size: 18px;
font-weight: 600;
}
.panel-description {
margin-bottom: 16px;
color: #5c6b7a;
font-size: 13px;
line-height: 1.45;
}
.option-row {
margin-bottom: 12px;
padding: 12px;
border: 1px solid #dfe5ee;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
font-size: 14px;
line-height: 1.35;
}
.option-row span {
display: block;
margin-bottom: 10px;
}
input {
padding: 6px 10px;
}
input[type=button] {
display: block;
width: 100%;
border: 1px solid #9bb2cf;
border-radius: 4px;
background: #fff;
color: #1f4f82;
cursor: pointer;
font-weight: 600;
}
input[type=button]:hover {
background: #edf5ff;
border-color: #6f98c8;
}
input[type=button]:focus {
outline: 2px solid #8ec5ff;
outline-offset: 1px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/',
'cdn:': 'https://cdn.mescius.io/demoapps/packages/spreadjs/19.2.2-master-2026-09-02-2133/'
},
// map tells the System loader where to look for things
map: {
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
'@mescius/spread-sheets': 'cdn:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'cdn:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
