<f-flow fDraggable (fLoaded)="onLoaded()" (fCreateConnection)="addConnection($event)"> <f-canvas fZoom> <f-connection-for-create fType="segment"></f-connection-for-create> <f-snap-connection [fSnapThreshold]="50" fType="segment"></f-snap-connection> @for (connection of connections; track connection.inputId) { <f-connection [fReassignDisabled]="true" fType="segment" [fOutputId]="connection.outputId" [fInputId]="connection.inputId"> </f-connection> } <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 24 }"> <div fNodeOutput fOutputConnectableSide="top" class="top"></div> <div fNodeOutput fOutputConnectableSide="right" class="right"></div> <div fNodeOutput fOutputConnectableSide="bottom" class="bottom"></div> I'm a node </div> <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 24 }"> <div fNodeInput fInputConnectableSide="left" class="left"></div> <div fNodeInput fInputConnectableSide="top" class="top"></div> <div fNodeInput fInputConnectableSide="bottom" class="bottom"></div> I'm a node </div> </f-canvas> </f-flow> <div class="examples-toolbar"> <button class="f-button" (click)="onDeleteConnections()">Delete Connections</button> </div>