https://github.com/mariohmol/ng-bpmn

An angular wrapper for bpmnjs
https://github.com/mariohmol/ng-bpmn

Last synced: 1 day ago
JSON representation

An angular wrapper for bpmnjs

• Host: GitHub
• URL: https://github.com/mariohmol/ng-bpmn
• Owner: mariohmol
• License: mit
• Created: 2019-01-23T16:08:40.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-10-17T02:51:45.000Z (29 days ago)
• Last Synced: 2024-10-19T05:15:01.469Z (27 days ago)
• Language: TypeScript
• Size: 2.37 MB
• Stars: 13
• Watchers: 2
• Forks: 8
• Open Issues: 63
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Angular bpmn-js 

This package wraps the [Bpmn](https://bpmn.io) module for Angular.

[![latest](https://img.shields.io/npm/v/ng-bpmn/latest.svg)](http://www.npmjs.com/package/ng-bpmn) 

[![Npm Downloads](https://img.shields.io/npm/dt/ng-bpmn.svg?maxAge=2592000)](https://www.npmjs.com/package/ng-bpmn)

Demo project in Stackblitz [DEMO](https://stackblitz.com/edit/ng-bpmn)

Demo src [Demo](https://github.com/mariohmol/ng-bpmn/src/app/demo)

This package support Angular 6, see please demo src.

## Getting started

Install via [npm](http://npmjs.com) :

```bash

npm install ng-bpmn

npm install [email protected]

```

Then include the `NgBpmnEditorModule` module in your module.

```typescript

import { NgBpmnEditorModule } from 'ng-bpmn';

@NgModule({

  imports: [

    BrowserModule,

    NgBpmnEditorModule,

    ...

  ]

  ...

})

export class AppModule {}

```

For index.html style urls 

```html

   

```

Or you can add this in your SCSS pipe 

```scss

@import "~bpmn-js/dist/assets/diagram-js.css";

@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";

```

Import BpmnEditorComponent in your component :

```typescript

import { Component, OnInit, ViewChild } from '@angular/core';

import { BpmnEditorComponent } from 'ng-bpmn';

import { Options } from 'bpmn';

@Component({

  selector: 'demo-app',

  templateUrl: './app.component.html'

})

export class AppComponent implements OnInit {

  options: Options;

  @ViewChild(BpmnEditorComponent) ucDiagram: BpmnEditorComponent;

  constructor() {}

  ngOnInit() {

  }

}

```

then your app.component.html

```html



    



```


## Events binging

TODO: 

## Development

* npm i @angular/compiler tsickle [email protected] -g

## Thanks

- Mario Mol ([@mariohmol](https://github.com/mariohmol))

## License

MIT