{"id":13640721,"url":"https://github.com/bpmn-io/bpmn-js-example-angular","last_synced_at":"2025-06-30T05:33:32.222Z","repository":{"id":54462473,"uuid":"160560297","full_name":"bpmn-io/bpmn-js-example-angular","owner":"bpmn-io","description":"An example how to integrate bpmn-js with an Angular application.","archived":false,"fork":false,"pushed_at":"2025-06-19T15:15:06.000Z","size":2636,"stargazers_count":63,"open_issues_count":4,"forks_count":54,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-06-19T16:28:28.408Z","etag":null,"topics":["angular","bpmn-js"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bpmn-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-12-05T18:20:26.000Z","updated_at":"2025-05-31T08:38:58.000Z","dependencies_parsed_at":"2024-05-31T02:29:35.626Z","dependency_job_id":"73607d19-adec-4f36-892d-3a33577cf77b","html_url":"https://github.com/bpmn-io/bpmn-js-example-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bpmn-io/bpmn-js-example-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fbpmn-js-example-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fbpmn-js-example-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fbpmn-js-example-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fbpmn-js-example-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bpmn-io","download_url":"https://codeload.github.com/bpmn-io/bpmn-js-example-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fbpmn-js-example-angular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262719995,"owners_count":23353412,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","bpmn-js"],"created_at":"2024-08-02T01:01:13.822Z","updated_at":"2025-06-30T05:33:32.210Z","avatar_url":"https://github.com/bpmn-io.png","language":"TypeScript","readme":"# bpmn-js-example-angular\n\n[![CI](https://github.com/bpmn-io/bpmn-js-example-angular/workflows/CI/badge.svg)](https://github.com/bpmn-io/bpmn-js-example-angular/actions?query=workflow%3ACI)\n\nAn example how to integrate bpmn-js with an [Angular](https://angular.io/) application.\n\n![Integration Screenshot](./docs/screenshot.png)\n\n## Prerequisites\n\nAssume you bootstrapped your application using the `ng` command:\n\n```sh\nng new bpmn-js-app --defaults=true\ncd bpmn-js-app\n```\n\n\n## Integrating bpmn-js\n\nInclude the style files for diagram-js and bpmn in your [`Angular.json file`](./bpmn-js-app/angular.json) under projects \u003e your project \u003e architect \u003e build \u003e options \u003e styles\n\n```json\n\"styles\": [\n              \"node_modules/bpmn-js/dist/assets/diagram-js.css\",\n              \"node_modules/bpmn-js/dist/assets/bpmn-js.css\",\n              \"node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css\",\n              \"src/styles.css\"\n            ],\n```\n\nCreate a component similar to [`DiagramComponent`](./bpmn-js-app/src/app/diagram/diagram.component.ts):\n\n```typescript\nimport {\n  AfterContentInit,\n  Component,\n  ElementRef,\n  Input,\n  OnChanges,\n  OnDestroy,\n  Output,\n  ViewChild,\n  SimpleChanges,\n  EventEmitter\n} from '@angular/core';\n\nimport { HttpClient } from '@angular/common/http';\nimport { catchError } from 'rxjs/operators';\n\n/**\n * You may include a different variant of BpmnJS:\n *\n * bpmn-viewer  - displays BPMN diagrams without the ability\n *                to navigate them\n * bpmn-modeler - bootstraps a full-fledged BPMN editor\n */\nimport * as BpmnJS from 'bpmn-js/dist/bpmn-modeler.production.min.js';\n\nimport { importDiagram } from './rx';\n\nimport { throwError } from 'rxjs';\n\n@Component({\n  selector: 'app-diagram',\n  template: `\n    \u003cdiv #ref class=\"diagram-container\"\u003e\u003c/div\u003e\n  `,\n  styles: [\n    `\n      .diagram-container {\n        height: 100%;\n        width: 100%;\n      }\n    `\n  ]\n})\nexport class DiagramComponent implements AfterContentInit, OnChanges, OnDestroy {\n\n  // instantiate BpmnJS with component\n  private bpmnJS: BpmnJS;\n\n  // retrieve DOM element reference\n  @ViewChild('ref', { static: true }) private el: ElementRef;\n\n  @Output() private importDone: EventEmitter\u003cany\u003e = new EventEmitter();\n\n  @Input() private url: string;\n\n  constructor(private http: HttpClient) {\n\n    this.bpmnJS = new BpmnJS();\n\n    this.bpmnJS.on('import.done', ({ error }) =\u003e {\n      if (!error) {\n        this.bpmnJS.get('canvas').zoom('fit-viewport');\n      }\n    });\n  }\n\n  ngAfterContentInit(): void {\n    // attach BpmnJS instance to DOM element\n    this.bpmnJS.attachTo(this.el.nativeElement);\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    // re-import whenever the url changes\n    if (changes.url) {\n      this.loadUrl(changes.url.currentValue);\n    }\n  }\n\n  ngOnDestroy(): void {\n    // destroy BpmnJS instance\n    this.bpmnJS.destroy();\n\n    this.viewer.attachTo(this.el.nativeElement);\n  }\n}\n\n```\n\n\n## Test the Example\n\n```sh\nnpm install\nnpm run all\n```\n\n## Additional Resources\n\n* [bpmn-js Examples](https://github.com/bpmn-io/bpmn-js-examples)\n* [bpmn-js Viewer Documentation](https://github.com/bpmn-io/bpmn-js/blob/main/lib/Viewer.js), [Example](https://github.com/bpmn-io/bpmn-js-examples/blob/main/starter/viewer.html)\n* [bpmn-js Modeler Documentation](https://github.com/bpmn-io/bpmn-js/blob/main/lib/Modeler.js), [Example](https://github.com/bpmn-io/bpmn-js-examples/tree/main/modeler)\n* [How to add Keyboard-Bindings](https://forum.bpmn.io/t/hotkeys-like-the-demo/89/2) (cf. [`Keyboard` service](https://github.com/bpmn-io/diagram-js/blob/main/lib/features/keyboard/Keyboard.js))\n\n## License\n\nMIT\n","funding_links":[],"categories":["Integrations"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpmn-io%2Fbpmn-js-example-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbpmn-io%2Fbpmn-js-example-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpmn-io%2Fbpmn-js-example-angular/lists"}