Connections and Arrows Not Displaying Correctly

[Rookxc]

I'm trying to connect nodes with simple lines. Currently, I have straight lines with circles at the ends, but I want the connections to look like the ones in the Foblex Call Center example

My current code:
<f-connection *ngFor="let connection of connections" [fReassignDisabled]="false" [fBehavior]="cBehavior" [fOutputId]="connection.from" [fInputId]="connection.to" [fType]="cType" [fConnectionId]="connection.key"> </f-connection>

Both fType and fBehavior are set correctly, just like in the example.

What I want:

What I have:

Any ideas on what I might be missing?

[siarheihuzarevich]

you didn't specify the fill property on the svg path

[Rookxc]

Even if I try adding <svg> and <path> (with fill inside path) like in example I get same result

[siarheihuzarevich]

https://angular.dev/guide/components/styling#ng-deep

Angular uses style encapsulation by default, which limits the scope of CSS within a component. This prevents styles from accidentally affecting other components, but can create complications when you need to change the styles of child components or elements created by third-party libraries.

To overcome this encapsulation, the ::ng-deep pseudo-class is used. Using ::ng-deep allows you to “break through” the encapsulation boundaries and apply styles to child components or deeper nested elements.

::ng-deep .f-connection {

    #normal_end {
      fill: var(--gray8);
    }

    #selected_end {
      fill: var(--blue3);
    }

    .f-connection-drag-handle {
      fill: transparent;
    }

    .f-connection-selection {
      stroke: #ffffff73;
      stroke-width: 20px;
      fill: none;
    }

    .f-connection-path {
      stroke-width: 3px;
      fill: none;
      stroke: var(--gray8);
    }

    &.f-selected {
      .f-connection-path {
        stroke: var(--blue3);
      }

      .f-connection-text {
        fill: var(--blue3);
      }

      .f-connection-selection {
        stroke: #ffffff;
      }
    }
  }

[Rookxc]

That worked! Thanks :)