Skip to main content

DHTMLX Spreadsheet. Angular integration example

Demo of DHTMLX Spreadsheet integration with Angular using the official GitHub demo. Shows initialization and cleanup for an Angular-based DHTMLX Spreadsheet component.

Try it online

View on GitHub - open the repository and click "Open in Codespaces" on the README page to launch a fully configured Angular app with DHTMLX Spreadsheet in seconds. No local setup required.

DHTMLX Spreadsheet integrates with Angular by binding the widget to a native DOM element resolved through Angular's @ViewChild decorator. The official demo creates a dedicated SpreadsheetComponent that initializes the widget in ngOnInit() and tears it down in ngOnDestroy(), following the standard imperative-widget-in-Angular pattern. ViewEncapsulation.None ensures the Spreadsheet's internal CSS applies globally without Angular's style scoping interfering with the widget's rendering.

The demo component imports Spreadsheet from the DHTMLX package and declares a @ViewChild("container", { static: true }) reference to a <div> element in the template. In ngOnInit(), it calls new Spreadsheet(this.spreadsheet_container.nativeElement, {}) to mount the widget, then loads data via this._spreadsheet.parse(data). The getData() function returns an object with sheets (an array of sheet configurations with cell values and formulas), styles (custom CSS class definitions), and formats (number, date, and currency format masks). Cleanup in ngOnDestroy() calls this._spreadsheet.destructor() to release all internal resources.

The linked GitHub demo covers the full integration workflow: Angular module setup, component declaration with @ViewChild container binding, Spreadsheet CSS import via the component stylesheet, data loading through parse(), and one-click launch support through GitHub Codespaces.

Solution overview​

  1. Install the DHTMLX Spreadsheet package and import Spreadsheet into your Angular component.
  2. Add a <div #container> to the component template and resolve it with @ViewChild("container", { static: true }).
  3. Initialize in ngOnInit() with new Spreadsheet(this.spreadsheet_container.nativeElement, {}).
  4. Load data by calling this._spreadsheet.parse(data) with an object containing sheets, styles, and formats.
  5. Set ViewEncapsulation.None on the component decorator to allow DHTMLX styles to apply globally.
  6. Clean up in ngOnDestroy() by calling this._spreadsheet.destructor().

Key points​

  • static: true on @ViewChild: Resolves the container ElementRef before ngOnInit(), making the DOM element available for widget initialization without waiting for ngAfterViewInit().
  • CSS import in component stylesheet: The component's CSS file imports @dhx/trial-spreadsheet/codebase/spreadsheet.min.css and sets the container to height: 100% so the Spreadsheet fills its parent.
  • Codespaces: The official demo repository supports one-click launch via "Open in Codespaces", providing a fully configured Angular development environment.

Additional resources​