<f-flow fDraggable (fLoaded)="onLoaded()" (fCreateConnection)="addConnection($event)">
  <f-canvas>
    <f-connection-for-create></f-connection-for-create>

    @for (connection of connections; track connection.inputId)  {
      <f-connection [fReassignDisabled]="true"
                    [fOutputId]="connection.outputId" [fInputId]="connection.inputId">
      </f-connection>
    }

    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputConnectableSide="right">drag me</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputConnectableSide="left">to me</div>

  </f-canvas>
</f-flow>