Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

PortDirective API in Angular Diagram API component

Nodes Directive

<e-nodes>
<e-node>
<e-node-ports>
<e-node-port>
</e-node-port>
</e-node-ports>
</e-node>
</e-nodes>

Properties

addInfo

any

Allows the user to save custom information/data about a port

Defaults to undefined

connectionDirection

any

Defines the allowed direction for connections to the port

  • Auto - Maintains the default behavior of automatic direction calculation.
  • Left - Restricts connections to only connect to the left side of the port.
  • Top - Restricts connections to only connect to the top side of the port.
  • Right - Restricts connections to only connect to the right side of the port.
  • Bottom - Restricts connections to only connect to the bottom side of the port.

Defaults to ‘Auto’

constraints

any

Defines the constraints of port

Defaults to ‘Default’

height

any

Sets the height of the port

Defaults to 12

horizontalAlignment

any

Sets the horizontal alignment of the port with respect to its immediate parent(node/connector)

  • Stretch - Stretches the diagram element throughout its immediate parent
  • Left - Aligns the diagram element at the left of its immediate parent
  • Right - Aligns the diagram element at the right of its immediate parent
  • Center - Aligns the diagram element at the center of its immediate parent
  • Auto - Aligns the diagram element based on the characteristics of its immediate parent

Defaults to ‘Center’

id

any

Defines the unique id of the port

Defaults to ”

inEdges

any

Defines the collection of the objects that are connected to a particular port

Defaults to undefined

margin

any

Defines the space that the port has to be moved from its actual position

Defaults to new Margin(0,0,0,0)

offset

any

Defines the position of the port with respect to the boundaries of nodes/connector

Defaults to new Point(0.5,0.5)

outEdges

any

Defines the collection of the objects that are connected to a particular port

Defaults to undefined

pathData

any

Defines the geometry of the port

Defaults to ”

shape

any

Defines the type of the port shape

  • X - Sets the decorator shape as X
  • Circle - Sets the decorator shape as Circle
  • Square - Sets the decorator shape as Square
  • Custom - Sets the decorator shape as Custom

Defaults to ‘Square’

style

any

Defines the appearance of the port

Defaults to {}

tooltip

any

defines the tooltip for the Ports

Defaults to new DiagramToolTip();

verticalAlignment

any

Sets the vertical alignment of the port with respect to its immediate parent(node/connector)

  • Stretch - Stretches the diagram element throughout its immediate parent
  • Top - Aligns the diagram element at the top of its immediate parent
  • Bottom - Aligns the diagram element at the bottom of its immediate parent
  • Center - Aligns the diagram element at the center of its immediate parent
  • Auto - Aligns the diagram element based on the characteristics of its immediate parent

Defaults to ‘Center’

visibility

any

Defines the type of the port visibility

  • Visible - Always shows the port
  • Hidden - Always hides the port
  • Hover - Shows the port when the mouse hovers over a node
  • Connect - Shows the port when a connection end point is dragged over a node

Defaults to ‘Connect’

width

any

Sets the width of the port

Defaults to 12

Previous
Next