|
Drawflow is a very powerful and flexible library that allows developers to create interactive flowcharts and diagrams in web applications. Angular 18 is the latest version of the frontend framework Angular. When drawflow is combined with Angular 18, it provides a robust solution for creating dynamic and good-looking flowchart interfaces. In this article, we explore how to integrate drawflow with Angular in different approaches.
Steps To Create Angular FlowChartStep 1: Install Angular CLI(if not already installed)
npm install -g @angular/cli Step 2: Create a new Angular project
ng new angular-drawflow Step 3: Navigate to the project folder
cd angular-drawflow Step 4: Install drawflow
npm install drawflow Step 5: Install Drawflow type definition
npm install @types/drawflow --save-dev Step 6: Create a flowchart component
ng generate component flowchart Updated Dependencies "dependencies": {
"@angular/animations": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/forms": "^18.0.0",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/router": "^18.0.0",
"drawflow": "^0.0.59",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},1. Basic Integration ApproachIn this approach, we directly incorporate Drawflow functionality within an Angular component. This approach is straightforward and suitable for simple applications or when drawflow is only needed in one part of the application. It offers quick implementation but may be less reusable across multiple components.
Project Structure Folder Structure Example
HTML
//app.component.html
<app-flowchart></app-flowchart>
//flowchart.component.html
<div #drawflow class="drawflow-container"></div>
//flowchart.component.ts
import { Component, OnInit, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import Drawflow from 'drawflow';
@Component({
selector: 'app-flowchart',
standalone: true,
templateUrl: './flowchart.component.html',
styleUrls: ['./flowchart.component.css']
})
export class FlowchartComponent implements OnInit, AfterViewInit {
@ViewChild('drawflow', { static: true }) drawflowEl!: ElementRef;
editor: any;
ngOnInit() {
// Initialize Drawflow
this.editor = new Drawflow(this.drawflowEl.nativeElement);
}
ngAfterViewInit() {
// Start the editor and add nodes after the view has been initialized
this.editor.start();
this.addNodes();
}
addNodes() {
// Add a "Start" node
const startNode = this.editor.addNode('start', 0, 1, 50, 50, 'start', {}, 'Start');
// Add a "Process" node
const processNode = this.editor.addNode('process', 1, 1, 250, 50, 'process', {}, 'Process');
// Add an "End" node
const endNode = this.editor.addNode('end', 1, 0, 450, 50, 'end', {}, 'End');
// Connect the nodes
this.editor.addConnection(startNode, processNode, 'output_1', 'input_1');
this.editor.addConnection(processNode, endNode, 'output_1', 'input_1');
}
}
//drawflow.d.ts
declare module 'drawflow' {
export default class Drawflow {
constructor(container: HTMLElement, render?: object);
start(): void;
addNode(name: string, inputs: number, outputs: number, posx: number,
posy: number, className: string, data: object, html: string): number;
}
}
//app.component.ts
import { Component } from '@angular/core';
import { FlowchartComponent } from './flowchart/flowchart.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [FlowchartComponent],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }
Output.gif) Angular Flowchart using Drawflow 2. Service-based ApproachIn this approach we create a dedicated Angular service to encapsulates Drawflow functionality. The service can be used across multiple components, promoting code reusability and allows for centralized management of the Drawflow instance.
Project Structure Folder Structure Example:
First of all we generate a drawflow service
ng generate service drawflow
HTML
//flowchart.component.html
<div #drawflow class="drawflow-container"></div>
//app.component.html
<app-flowchart></app-flowchart>
//flowchart.component.ts
import {
Component,
OnInit,
ElementRef,
ViewChild,
AfterViewInit,
} from '@angular/core';
import { DrawflowService } from '../drawflow.service';
@Component({
selector: 'app-flowchart',
standalone: true,
imports: [], // Add any necessary imports here
templateUrl: './flowchart.component.html',
styleUrls: ['./flowchart.component.css'],
})
export class FlowchartComponent implements AfterViewInit {
@ViewChild('drawflow', { static: true }) drawflowEl!: ElementRef;
constructor(private drawflowService: DrawflowService) { }
ngAfterViewInit() {
this.drawflowService.initializeEditor(this.drawflowEl.nativeElement);
this.createFlowchart();
}
private createFlowchart() {
const startNode = this.drawflowService.addNode(
'start',
0,
1,
50,
50,
'start',
{},
'Start'
);
const processNode = this.drawflowService.addNode(
'process',
1,
1,
250,
50,
'process',
{},
'Process'
);
const endNode = this.drawflowService.addNode(
'end',
1,
0,
450,
50,
'end',
{},
'End'
);
this.drawflowService.addConnection(
startNode,
processNode,
'output_1',
'input_1'
);
this.drawflowService.addConnection(
processNode,
endNode,
'output_1',
'input_1'
);
}
}
//app.component.ts
import { Component } from '@angular/core';
import { FlowchartComponent } from './flowchart/flowchart.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [FlowchartComponent],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }
//drawflow.service.ts
import { Injectable } from '@angular/core';
import Drawflow from 'drawflow';
@Injectable({
providedIn: 'root',
})
export class DrawflowService {
private editor: any;
initializeEditor(container: HTMLElement) {
this.editor = new Drawflow(container);
this.editor.start();
}
addNode(
name: string,
inputs: number,
outputs: number,
posX: number,
posY: number,
className: string,
data: any,
html: string
) {
return this.editor.addNode(
name,
inputs,
outputs,
posX,
posY,
className,
data,
html
);
}
addConnection(
nodeId: number,
targetId: number,
outputId: string,
inputId: string
) {
this.editor.addConnection(nodeId, targetId, outputId, inputId);
}
}
//drawflow.d.ts
declare module 'drawflow' {
export default class Drawflow {
constructor(container: HTMLElement, render?: object);
start(): void;
addNode(
name: string,
inputs: number,
outputs: number,
posx: number,
posy: number,
className: string,
data: object,
html: string
): number;
}
}
Output Angular Flowchart using Drawflow
|
