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

#### 1. Import the NgxFlowchartModule:

`ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxFlowchartModule } from 'ngx-flowchart';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxFlowchartModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

`

#### 2. Define the data and options to your component:

`ts

import { Component } from '@angular/core';
import { NgxFlowChatOptions, NgxFlowChatData } from 'ngx-flowchart'

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})

export class AppComponent {

flowData: NgxFlowChatData[] = [
{
id: "1",
name: "Group1",
groupData: [{
id: "2",
name: "Flow1",
}]
},
{
id: "3",
name: "Flow2",
},
{
id: "4",
name: "Group2",
groupData: [{
id: "5",
name: "Flow3",
},
{
id: "6",
name: "Flow4",
}]
},
];

flowOptions: NgxFlowChatOptions = {
groupBackground: 'linear-gradient(to bottom,#b9b9b9 0,#fefefe 50%)',
groupShadow: '0 0.3rem 0.5rem 0 rgba(44,51,73,.5)',
groupBorderRadius: '3px',
groupTextColor: '#000',
background: '#0e3e7d',
shadow: '0 2px 4px 0 #333',
borderRadius: '5px',
textColor: '#fff',
width: '200px'
};

clickN(event) {
console.log(event);
}
}


`

#### 3. Use HTML tags:
`ts

`

API

$3

- 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 |

$3

- clickName`: Click event, will get the raw data.