elsa-designer-angular
v0.0.2
Published
This is rewritten of [elsa-designer](https://github.com/elsa-workflows/elsa-designer) for angular 10 with angular material.
Downloads
5
Readme
Elsa-designer-angular
This is rewritten of elsa-designer for angular 10 with angular material.
Install
- Install
npm i elsa-designer-angular
- Import WorkflowModule in your AppModule
@NgModule({
imports: [
...
WorkflowModule.forRoot()
]
})
- Insert element ec-wf in your component.
<ec-wf
id="designerHost"
plugins="PrimitiveActivities ControlFlowActivities EmailActivities HttpActivities ConsoleActivities MassTransitActivities TimerActivities"
activity-definitions=""
workflow='{"activities":[{"id":"278a7ae3-83dc-4ebb-8ce6-4a3d2a44fdbd","top":88,"left":107,"type":"ReadLine","state":{},"displayName":"Read Line"},{"id":"59b9576b-e13c-4bef-be25-c83489014b5d","top":97,"left":429,"type":"WriteLine","state":{},"displayName":"Write Line"}],"connections":[{"sourceId":"278a7ae3-83dc-4ebb-8ce6-4a3d2a44fdbd","targetId":"59b9576b-e13c-4bef-be25-c83489014b5d","outcome":"Done"}]}'
readonly="false"
height = "100vh"
></ec-wf>
Alternatively you can initialize workflow and workflow definitions using WorkflowService
import {Workflow, WorkflowService} from 'elsa-designer-angular'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor(private workflowService: WorkflowService){}
ngOnInit(){
this.workflowService.setWorkflow({"activities":[{"id":"278a7ae3-83dc-4ebb-8ce6-4a3d2a44fdbd","top":88,"left":107,"type":"ReadLine","state":{},"displayName":"Read Line"},{"id":"59b9576b-e13c-4bef-be25-c83489014b5d","top":97,"left":429,"type":"WriteLine","state":{},"displayName":"Write Line"}],"connections":[{"sourceId":"278a7ae3-83dc-4ebb-8ce6-4a3d2a44fdbd","targetId":"59b9576b-e13c-4bef-be25-c83489014b5d","outcome":"Done"}]} as Workflow)
}
}