Angular workflow builder from scratch | ngDiagram Ep. 1: Project setup
Build a workflow builder in Angular from scratch. Episode 1 of the ngDiagram crash course: set up an Angular app, install ngDiagram, and render your first interactive diagram with nodes, edges and zoom to fit.
Tutorial by Jakub Kubacki, one of the maintainers of ngDiagram at Synergy Codes.
ngDiagram is an open-source diagramming library built natively for Angular - every node is a real Angular component, state runs on signals, and there are no external dependencies. This series builds an automation frontend step by step, so you can see what a node-based UI takes in a real Angular project rather than in a snippet.
CODE FROM THIS EPISODE
Repository: https://github.com/synergycodes/ngd-a...
LINKS
ngDiagram: https://www.ngdiagram.dev
Quick start: https://www.ngdiagram.dev/docs/intro/...
GitHub: https://github.com/synergycodes/ng-di...
npm: https://www.npmjs.com/package/ng-diagram
Discord: / discord
CHAPTERS
00:00 Intro – what you can build with ngDiagram
00:46 Project setup & installing ngDiagram
04:06 The default node
05:36 Summary & outro
WHAT YOU WILL LEARN
Scaffolding an Angular app with the Angular CLI and Tailwind
Installing ngDiagram and importing its global styles
Registering the dependency injection scope with provideNgDiagram
Defining a diagram model with initializeModel: nodes, edges, IDs and positions
Providing your own model implementation instead of the default signal store
What the default node handles for you: labels, ports, resizing, rotation
Turning on zoom to fit through the ngDiagram config object
STACK
Angular, TypeScript, Tailwind CSS, ngDiagram
#Angular #ngDiagram #OpenSource