ngx-flowchart
ngx-flowchart
is an Angular component to show a flow chart. You can also grouping the flow process.
It was built for modern browsers using TypeScript, CSS3 and HTML5 and Angular 9.1.9
.
Features
- Show flow chart by tree data
- Customer styles (Background color, text color, shadow, etc.)
- Responsive
Installation
To use ngx-datatable in your project install it via npm:
npm i ngx-flowchart --save
Usage
NgxFlowchartModule
:
1. Import the ;;; ;
2. Define the data and options to your component:
;
3. Use HTML tags:
ngx-flowchart ="flowData" ="flowOptions" ="clickN($event)"/ngx-flowchart
API
Properties:
-
data
: The tree data. [ { id: "1", name: "Group1", groupData: [{ id: "2", name: "Flow1", }] } ] -
options
: Style Options. (json)
Name | Required | Default Value | Description |
---|---|---|---|
width | No | 200px | div min-width |
groupBackground | No | linear-gradient(rgb(185, 185, 185) 0px, rgb(254, 254, 254) 100%) | Group div background |
groupShadow | No | 0 0.3rem 0.5rem 0 rgba(44,51,73,.5) | Group div shadow |
groupBorderRadius | No | 3px | Group div border radius |
groupTextColor | No | #000 | Group div font color |
background | No | #0e3e7d | div background |
shadow | No | 0 2px 4px 0 #333 | div shadow |
borderRadius | No | 5px | div border radius |
textColor | No | #fff | div font color |
Methods:
clickName
: Click event, will get the raw data.