Angularのノードベースライブラリ ngx-vflow を使ってみた

DRANK

はじめに@denwaya34です。😆angularのNodeベースのアプリケーション開発ライブラリ:ngx-vflowを使ってみたのでレポートします。ngx-vflow とはngx-vflowはノードベースのアプリケーションを作成するためのAngularライブラリです。Reactにはreact-flowというライブラリがありますが、ngx-vflowはそれと類似のAngular向けのライブラリです。こんな感じでフロー図を作成できます。使い方Node(=図の四角部分)は以下のように定義します。const node = { id: '1', point: { x: 60, y: 150 }, type: 'default', text: '1', }; Edge(=Node間の線)は以下のように定義します。const edge = { id: '1 -> 3', source: '1', target: '3', }; NodeとEdgeを定義したら、以下のように<vflow>タグに渡します。全体のコードは以下です。app.component.tsimport {ChangeDetectionStrategy, Component, signal} from '@angular/core'; import {Vflow, Node, Edge} from 'ngx-vflow'; @Component({ selector: 'app-root', imports: [Vflow], changeDetection: ChangeDetectionStrategy.OnPush, templ…