Moving fNode into its own Component

[0bro]

I am new to Angular, so this may not be an issue with F-Flow but rather skill issue.

This sample of the parent class:

<f-flow
  fDraggable
  (fCreateConnection)="addConnection($event)"
  (drop)="onDrop($event)"
  (dragover)="onDragover($event)"
>
  <f-background> <f-rect-pattern></f-rect-pattern> </f-background>

  <f-canvas [position]="canvasPosition">
    <f-connection-for-create></f-connection-for-create>
    <f-snap-connection [fSnapThreshold]="50"></f-snap-connection>
    @for (connection of connections; track connection.inputId) {
      <f-connection
        [fReassignDisabled]="false"
        [fOutputId]="connection.outputId"
        [fInputId]="connection.inputId"
      >
      ...
      </f-connection>
    }

    @for (item of canvasItems; track $index) {
    
    // If I only have this div it works as expected
      <div
        fNode
        [fNodePosition]="{ x: 120, y: 120 }"
        draggable
      >
        THIS WORKS
      </div>
      
      // The following is the same code but inside a Component that has "FFlowModules" as an import. If I use the top it works, if I use the bottom I get nothin on my screen
      <canvas-item />
    }
  </f-canvas>
  <f-minimap />
</f-flow>

My question is: "How would you normally go about moving the <div fNode ... /> into its own component"

[siarheihuzarevich]

Hi. Yes, the second entry will not work. because f-flow expects an element with the fNode selector-directive. the link has examples of how to move a node to a separate component

• https://flow.foblex.com/examples/f-db-management-flow/
• https://flow.foblex.com/examples/tournament-bracket/