We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

connectorDefaults are not getting applied

I am trying to set connector defaults through code. 

this.diagram.connectorDefaults = 


      constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Drag,

      type: 'Orthogonal',

      cornerRadius: 7,

      targetDecorator: { height: 7, width: 7 },

      style: { strokeColor: '#5C5C5B' },

      fixedUserHandles: [


          id: 'delete',

          alignment: 'Before',

          width: 25,

          height: 25,

          iconStrokeColor: 'white',

          fill: '#7d7d7d',


            'M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zM9 4v2h6V4H9z',

          offset: 0.5,

          padding: { top: 5, bottom: 5, left: 5, right: 5 },

          cornerRadius: 15,




The connector defaults are not getting applied to newly created connector. But if I save and reload they a

3 Replies

SJ Sivaranjith Jeyabalan Syncfusion Team March 21, 2023 10:50 AM UTC

Hi Khadeeja,

We cannot replicate the issue at our end. We have created a sample in which we can draw connector in diagram using drawing tool and the connector defaults values are applied properly. We have also provided a button in which we can add connector at runtime. We have provided stroke color and stroke width for the connector in connector defaults, and its applied properly. Please find the sample below:

Sample: https://stackblitz.com/edit/angular-vpahhh?file=src%2Fapp.component.html,src%2Fapp.component.ts 



KB Khadeeja Basharat March 21, 2023 10:59 AM UTC

I have replicated the issue that I am having:


Also, I don't want to provide it in HTML but handle everything in .ts file. Kindly please help.

VG Vivisa Ganesan Syncfusion Team March 22, 2023 02:18 PM UTC

Hi Khadeeja,

Binding of connectorDefaults in html is the proper way.But,If you don’t want to bind it in html file, we can bind connectorDefaults on button click but the connectorDefaults applied only to the connectors created at runtime and it will not apply to the connectors at initial rendering. Please find the sample below for your reference.




Live Chat Icon For mobile
Up arrow icon