Skip to main content

DHTMLX Pivot. Angular demo example

Demo of DHTMLX Pivot integration with Angular using the official GitHub demo. Shows Angular component initialization and cleanup for a Pivot instance.

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 Pivot in seconds. No local setup required.

Integrating third-party JavaScript widgets into Angular applications requires aligning widget initialization with Angular's component lifecycle. DHTMLX Pivot uses imperative DOM manipulation for initialization, which needs to align with Angular's template rendering. In this demo, the widget is initialized after resolving the container element and destroyed when the component is removed.

The demo component uses @ViewChild("container", { static: true }) so the container ElementRef is resolved before ngOnInit(), allowing the Pivot to initialize early in the lifecycle. The component sets ViewEncapsulation.None to ensure DHTMLX Pivot's internal styles are not scoped. Cleanup in ngOnDestroy() calls this._table.destructor() to prevent memory leaks during route navigation.

This example links to the official DHTMLX Pivot Angular demo on GitHub, which demonstrates the recommended integration pattern. You can launch the demo directly in GitHub Codespaces from the repository's README page. The demo covers @ViewChild container binding, ngOnInit() initialization, and cleanup on component destruction.

Solution overview​

To integrate DHTMLX Pivot with Angular, follow the standard widget lifecycle pattern:

  1. Reference the container using @ViewChild("container", { static: true }) to get an ElementRef - static: true resolves the query before ngOnInit(), making the DOM element available early.
  2. Initialize in ngOnInit() - call new Pivot(this.pivot_container.nativeElement, config) passing fields, data, and pivot configuration (headerShape, tableShape, config with rows, columns, values).
  3. Set ViewEncapsulation.None on the component - this ensures DHTMLX Pivot's internal CSS is not scoped to the Angular component, allowing the widget to render correctly.
  4. Clean up in ngOnDestroy() by calling this._table.destructor() to remove all event listeners and internal state, preventing memory leaks during route navigation.

Key points​

  • @ViewChild with static: true: Resolves the container element before ngOnInit(), unlike static: false which defers resolution until ngAfterViewInit(). This allows initialization earlier in the component lifecycle.
  • Initialization in ngOnInit(): Creates the Pivot instance using this.pivot_container.nativeElement as the mount point, with configuration for fields, data, header/table shapes, and row/column/value definitions
  • Mandatory destructor() in ngOnDestroy(): Calls this._table.destructor() to prevent memory leaks, especially in single-page applications with route navigation where components mount and unmount frequently
  • ViewEncapsulation.None: Required so that DHTMLX Pivot's internal styles apply globally rather than being scoped to the Angular component
  • GitHub Codespaces support: The official demo repository supports one-click launch via "Open in Codespaces", providing a fully configured development environment without local setup

Additional resources​