NgFlowchartStepComponent

Every step rendered on the canvas is created as an NgFlowchartStepComponent. The component contains a rich API making it easy to extend the component to meat your needs.

• For examples of a custom component see Creating Steps

Method Reference

• canDeleteStep

  () : boolean

  A check called prior to step deletion. Custom components can override and perform any checks to allow or block deletion. By default returns true.

---

• canDrop

  (dropEvent: NgFlowchart.DropTarget, error: NgFlowchart.ErrorMessage) : boolean

  A check called prior to step being dropped. Called when either moving an existing step or dropping a new one. The error object argument is optional. Any error message set on the error arg will be returned in the chart onDropError callback. By default returns true.

---

• getDropPositionsForStep

  (step: NgFlowchart.Step): NgFlowchart.DropPosition[]

  Called when hovering a step over the canvas to determine valid drop positions. By default returns ['ABOVE', 'BELOW', 'LEFT', 'RIGHT'], I.E. all locations.

---

• addChild

  (pending: NgFlowchart.PendingStep, options: AddChildOptions): Promise<NgFlowchartStepComponent | null>

  Creates and adds a child to this Step Component. Similar to the NgFlowchartStep directive, either a TemplateRef or a component type extending NgFlowchartStepComponent can be passed.

---

• destroy

  (recursive: boolean = true, checkCallbacks: boolean = true): boolean

  Destroys this step component and updates all necessary child and parent relationships. A true recursive value will delete this step and all children.

---

• removeChild

  (childToRemove: NgFlowchartStepComponent): number

  Remove a child from this step. Returns the index at which the child was found or -1 if not found.

---

Property Reference

Model

• AddChildOptions

  • sibling?: boolean

    Should the child be added as a sibling to existing children, if false the existing children will be reparented to this new child. Default is true.

  • index?: number

    The index of the child. Only used when sibling is true. Defaults to the end of the child array.

---

• NgFlowchart.DropPosition

  A string type representing canvas drop positions.

  • ABOVE - Add as new parent
  • BELOW - Add as new only child
  • LEFT - Add as older sibling
  • RIGHT - Add as younger sibling

---

• NgFlowchart.DropTarget

  A Type containing data pertaining to 'where' a step is dropped on the canvas.

  • step: NgFlowchartStepComponent

    The NgFlowchartStepComponent the pending step is dropping adjacent to.

  • position: NgFlowchart.DropPosition

    The position of the pending step, relative to the target step

---

• NgFlowchart.ErrorMessage

  An error message type that can be set by Step methods and returned to the OnDropError callback.

  • code?: string

    A shorthand lookup code to identify the error. Codes are entirely up to consumers and are nothing more than convention to easily identify errors.

  • message?: string

    A user friendly error message to indicate what happened.

---

• NgFlowchart.PendingStep extends NgFlowchart.Step

  • template: TemplateRef | Type<NgFlowchartStepComponent>

    An Ng-template containing the canvas content to be displayed. Or a component type that extends NgFlowchartStepComponent

---

• NgFlowchart.Step

  • type: string

    A unique string indicating the type of step this is. This type can be seen in the JSON output and is used during the upload process.

  • data: any

    Optional data to give the step. Typically configuration data that users can edit on the step.