1"use strict";(self.webpackChunknocode_js_com=self.webpackChunknocode_js_com||[]).push([[8392],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>g});var i=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var d=i.createContext({}),u=function(e){var t=i.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},s=function(e){var t=u(e.components);return i.createElement(d.Provider,{value:t},e.children)},p="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},f=i.forwardRef((function(e,t){var n=e.components,o=e.mdxType,r=e.originalType,d=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=u(n),f=o,g=p["".concat(d,".").concat(f)]||p[f]||c[f]||r;return n?i.createElement(g,a(a({ref:t},s),{},{components:n})):i.createElement(g,a({ref:t},s))}));function g(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var r=n.length,a=new Array(r);a[0]=f;var l={};for(var d in t)hasOwnProperty.call(t,d)&&(l[d]=t[d]);l.originalType=e,l[p]="string"==typeof e?e:o,a[1]=l;for(var u=2;u<r;u++)a[u]=n[u];return i.createElement.apply(null,a)}return i.createElement.apply(null,n)}f.displayName="MDXCreateElement"},7733:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>c,frontMatter:()=>r,metadata:()=>l,toc:()=>u});var i=n(7462),o=(n(7294),n(3905));const r={sidebar_position:3,sidebar_label:"Initialize with Angular"},a="Initialize Sequential Workflow Editor with Angular",l={unversionedId:"sequential-workflow-editor/initialize-with-angular",id:"sequential-workflow-editor/initialize-with-angular",title:"Initialize Sequential Workflow Editor with Angular",description:"In this tutorial we will show you how to initialize the Sequential Workflow Editor with Angular.",source:"@site/docs/sequential-workflow-editor/initialize-with-angular.md",sourceDirName:"sequential-workflow-editor",slug:"/sequential-workflow-editor/initialize-with-angular",permalink:"/docs/sequential-workflow-editor/initialize-with-angular",draft:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,sidebar_label:"Initialize with Angular"},sidebar:"tutorialSidebar",previous:{title:"Initialize with React",permalink:"/docs/sequential-workflow-editor/initialize-with-react"},next:{title:"Initialize Pro",permalink:"/docs/sequential-workflow-editor/initialize-pro"}},d={},u=[{value:"\ud83d\ude80 Installation",id:"-installation",level:2},{value:"\ud83c\udfac Usage",id:"-usage",level:2}],s={toc:u},p="wrapper";function c(e){let{components:t,...n}=e;return(0,o.kt)(p,(0,i.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"initialize-sequential-workflow-editor-with-angular"},"Initialize Sequential Workflow Editor with Angular"),(0,o.kt)("p",null,"In this tutorial we will show you how to initialize the Sequential Workflow Editor with Angular."),(0,o.kt)("h2",{id:"-installation"},"\ud83d\ude80 Installation"),(0,o.kt)("p",null,"You may use the editor with any designer, but in this tutorial we will focus on the Sequential Workflow Designer. At the beginning you need to install the following dependencies:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-bash"},"npm i sequential-workflow-model sequential-workflow-editor-model sequential-workflow-editor sequential-workflow-designer sequential-workflow-designer-angular\n")),(0,o.kt)("h2",{id:"-usage"},"\ud83c\udfac Usage"),(0,o.kt)("p",null,"At the beginning you need to import the ",(0,o.kt)("inlineCode",{parentName:"p"},"SequentialWorkflowDesignerModule"),":"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import { SequentialWorkflowDesignerModule } from 'sequential-workflow-designer-angular';\n\n@NgModule({\n imports: [\n SequentialWorkflowDesignerModule,\n // ...\n ],\n // ...\n})\nexport class AppModule {}\n")),(0,o.kt)("p",null,"Now you may create your endpoint definition model. You can use the ",(0,o.kt)("a",{parentName:"p",href:"./initialize-with-javascript-or-typescript"},"tutorial for JS or TS")," to see how to create the model."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import { createDefinitionModel } from 'sequential-workflow-editor-model';
1\n\nexport const definitionModel = createDefinitionModel((model) => { /* ... */ });\n")),(0,o.kt)("p",null,"Next, in your component you need to create a few properties:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import { Definition } from 'sequential-workflow-model';\nimport {\n Designer,\n DefinitionChangedEvent,\n RootEditorProvider,\n StepEditorProvider,\n StepsConfiguration,\n ToolboxConfiguration,\n ValidatorConfiguration\n} from 'sequential-workflow-designer';\n\nexport class AppComponent {\n public definition: Definition = /* ... */;\n public stepsConfiguration: StepsConfiguration = {};\n public toolboxConfiguration?: ToolboxConfiguration;\n public validatorConfiguration?: ValidatorConfiguration;\n public stepEditorProvider?: StepEditorProvider;\n public rootEditorProvider?: RootEditorProvider;\n // ...\n")),(0,o.kt)("p",null,"Now you can initialize the editor by creating the editor provider and setting the configuration properties:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import { EditorProvider } from 'sequential-workflow-editor';\nimport { Uid } from 'sequential-workflow-designer';\n\npublic ngOnInit() {\n const editorProvider = EditorProvider.create(definitionModel, {\n uidGenerator: Uid.next\n });\n this.stepEditorProvider = editorProvider.createStepEditorProvider();\n this.rootEditorProvider = editorProvider.createRootEditorProvider();\n this.validatorConfiguration = {\n root: editorProvider.createRootValidator(),\n step: editorProvider.createStepValidator()\n };\n this.toolboxConfiguration = {\n groups: editorProvider.getToolboxGroups()\n };\n}\n")),(0,o.kt)("p",null,"Additionally, you may want to subscribe to the ",(0,o.kt)("inlineCode",{parentName:"p"},"onReady")," and ",(0,o.kt)("inlineCode",{parentName:"p"},"onDefinitionChanged")," events:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"public onDesignerReady(designer: Designer) {\n this.designer = designer;\n}\n\npublic onDefinitionChanged(event: DefinitionChangedEvent) {\n this.definition = event.definition;\n}\n")),(0,o.kt)("p",null,"Now you can use the editor in your template:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-html"},'<sqd-designer\n theme="light"\n [definition]="definition"\n [toolboxConfiguration]="toolboxConfiguration"\n [stepsConfiguration]="stepsConfiguration"\n [validatorConfiguration]="validatorConfiguration"\n [controlBar]="true"\n [areEditorsHidden]="false"\n [rootEditor]="rootEditorProvider"\n [stepEditor]="stepEditorProvider"\n (onReady)="onDesignerReady($event)"\n (onDefinitionChanged)="onDefinitionChanged($event)"\n>\n</sqd-designer>\n')),(0,o.kt)("p",null,"That's it!"))}c.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.