Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.1.1","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.1.1\",\n \"@handsontable/angular-wrapper\": \"18.1.1\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\",\n \"hyperformula\": \"3.4.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>Handsontable Angular Example</title>\n <base href=\"/\">\n <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n <div>\n <app-example1></app-example1>\n </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n selector: 'app-example1',\n template: `\n <h3 class=\"demo-preview\">Sheet 1</h3>\n <hot-table\n [settings]=\"hotSettings1!\" [data]=\"hotData1\">\n </hot-table>\n\n <h3 class=\"demo-preview\">Sheet 2</h3>\n <hot-table\n [settings]=\"hotSettings2!\" [data]=\"hotData2\">\n </hot-table>\n `,\n styles: `\n h3.demo-preview {\n margin-bottom: 0.3rem !important;\n padding-top: 0 !important;\n margin-top: 0.5rem !important;\n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n // create an external HyperFormula instance\n readonly hyperformulaInstance = HyperFormula.buildEmpty({\n // to use an external HyperFormula instance,\n // initialize it with the `'internal-use-in-handsontable'` license key\n licenseKey: 'internal-use-in-handsontable',\n });\n\n readonly hotData1 = [\n ['10.26', null, 'Sum', '=SUM(A:A)'],\n ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n ['40.29', null, 'MAX', '=MAX(A:A)'],\n ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n ];\n\n readonly hotSettings1: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: this.hyperformulaInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n\n readonly hotData2 = [\n ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n ['Generate a random number', '=RAND()'],\n ['Number of sheets in this workbook', '=SHEETS()'],\n ];\n\n readonly hotSettings2: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: this.hyperformulaInstance,\n sheetName: 'Sheet2',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"Angular"}
{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.1.1","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.1.1\",\n \"@handsontable/angular-wrapper\": \"18.1.1\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\",\n \"hyperformula\": \"3.4.0\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>Handsontable Angular Example</title>\n <base href=\"/\">\n <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n <div>\n <app-example1></app-example1>\n </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n selector: 'app-example1',\n template: `\n <h3 class=\"demo-preview\">Sheet 1</h3>\n <hot-table\n [settings]=\"hotSettings1!\" [data]=\"hotData1\">\n </hot-table>\n\n <h3 class=\"demo-preview\">Sheet 2</h3>\n <hot-table\n [settings]=\"hotSettings2!\" [data]=\"hotData2\">\n </hot-table>\n `,\n styles: `\n h3.demo-preview {\n margin-bottom: 0.3rem !important;\n padding-top: 0 !important;\n margin-top: 0.5rem !important;\n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n // create an external HyperFormula instance\n readonly hyperformulaInstance = HyperFormula.buildEmpty({\n // this demo uses the GPLv3 key,\n // use your own HyperFormula license key in your app\n licenseKey: 'gpl-v3',\n });\n\n readonly hotData1 = [\n ['10.26', null, 'Sum', '=SUM(A:A)'],\n ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n ['40.29', null, 'MAX', '=MAX(A:A)'],\n ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n ];\n\n readonly hotSettings1: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: this.hyperformulaInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n\n readonly hotData2 = [\n ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n ['Generate a random number', '=RAND()'],\n ['Number of sheets in this workbook', '=SHEETS()'],\n ];\n\n readonly hotSettings2: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: this.hyperformulaInstance,\n sheetName: 'Sheet2',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"Angular"}
Loading