Skip to main content

DHTMLX Kanban. Angular integration example

This demo shows how to embed DHTMLX Kanban into an Angular application. The Kanban board initializes as a vanilla JavaScript widget inside an Angular component. For a step-by-step setup guide, see the detailed Angular integration guide.

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 Kanban. No local setup required.

Solution overview​

  1. Create a custom KanbanComponent
  2. Use @ViewChild() decorator with { static: true } to access DOM elements for Kanban and Toolbar containers
  3. In the ngOnInit lifecycle hook, initialize Kanban with the new Kanban(this.kanban_container.nativeElement, { columns, cards, rows, rowKey, cardShape, editorShape, currentUser }) constructor
  4. Call the new Toolbar(this.toolbar_container.nativeElement, { api: this._kanban.api }) constructor to create a Toolbar instance and bind it to Kanban
  5. In ngOnDestroy lifecycle hook, call destructor() to clean up DOM nodes and event listeners for Kanban and Toolbar

API reference​

Additional resources​