<f-flow fDraggable (fLoaded)="onLoaded()"> <f-canvas> <f-connection [fReassignDisabled]="true" fOutputId="1" fInputId="2" fBehavior="fixed" fType="segment"> </f-connection> <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 150 }" fNodeOutput fOutputId="1" [fOutputConnectableSide]="outputSide"> I'm connector with {{ outputSide }} connectable side </div> <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 150 }" fNodeInput fInputId="2" [fInputConnectableSide]="inputSide"> I'm connector with {{ inputSide }} connectable side </div> </f-canvas> </f-flow> <div class="examples-toolbar"> <button class="f-button" (click)="onSwitchSides()">Switch Sides</button> </div>