Search results

Migration from Essential JS 1 in Angular Diagram component

This article describes the API migration process of Diagram component from Essential JS 1 to Essential JS 2.

Background

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the background color of diagram elements Property:`backgroundColor`

HTML

<ej-diagram id="diagramCore" width="1000" height="600"  backgroundColor= "red" >
</ej-diagram>
Property:`backgroundColor`

HTML

  <ejs-diagram #diagram id="diagram" width="850px" height="700px" backgroundColor= "red">
 </ejs-diagram>
Defines how to align the background image over the diagram area Property:`backgroundImage.alignment`

HTML

<ej-diagram id="diagramCore" width="1000" height="600" [backgroundImage]="backgroundImage">
</ej-diagram>
Script
public backgroundImage;
constructor() {
this.backgroundImage = {
    aligment: "XMidYMind",
    }
};
Property:`background.align`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [pageSettings]="pageSettings" >
</ejs-diagram>
Script
public pageSettings: PageSettingsModel;
ngOnInit(): void {
    this.pageSettings = {
    background: {
        align: 'XMinYMin'
    },
    }
}
Defines how the background image should be scaled/stretched Property:`backgroundImage.scale`

HTML

<ej-diagram id="diagramCore" width="1000" height="600" [backgroundImage]="backgroundImage">
</ej-diagram>
Script
public backgroundImage;
constructor() {
this.backgroundImage = {
    scale: "Meet",
};
}
Property:`background.scale`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [pageSettings]="pageSettings" >
</ejs-diagram>
Script
public pageSettings: PageSettingsModel;
ngOnInit(): void {
    this.pageSettings = {
    background: {
        scale: 'Meet',
    },
    }
}
Sets the source path of the background image Property:`backgroundImage.source`

HTML

<ej-diagram id="diagramCore" width="1000" height="600" [backgroundImage]="backgroundImage">
</ej-diagram>
Script
public backgroundImage;
constructor() {
this.backgroundImage = {
    source: "https://www.w3schools.com/images/w3schools_green.jpg"
};
}
Property:`background.source`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [pageSettings]="pageSettings" >
</ejs-diagram>
Script
public pageSettings: PageSettingsModel;
ngOnInit(): void {
    this.pageSettings = {
    background: {
        source: "https://www.w3schools.com/images/w3schools_green.jpg",
    },
    }
}

Bridging

Behaviour API in Essential JS 1 API in Essential JS 2
Sets the direction of line bridges Property:`bridgeDirection`

HTML

<ej-diagram id="diagramCore" width="1000" height="600"  bridgeDirection = "Bottom" >
</ej-diagram>
Property:`bridgeDirection`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" bridgeDirection = "Bottom" >
</ejs-diagram>

CommandManager

Behaviour API in Essential JS 1 API in Essential JS 2
commands Property:`commandManager.commands`

HTML
<ej-diagram id="diagramCore" width="1000" height="600" [commandManager]="commandManager">
</ej-diagram>

Script

commandManager: Object;
constructor() {
    this.commandManager = { commands: {
        "clone": {
            gesture: {
                key: Keys.C,
                keyModifiers: KeyModifiers.Shift
            },
            canExecute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                return diagram.model.selectedItems.children.length;
            },
            execute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                diagram.copy();
                diagram.paste();
            }
            }
        }
    }
});
Property:`commandManager.commands`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
public commandManager: CommandManager;
ngOnInit(): void {
    this.commandManager = {
    commands: [{
        name: 'customCopy',
        parameter: 'node',
        canExecute: function() {
            if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
                return true;
            }
            return false;
        },
        execute: function() {
            for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
                diagram.selectedItems.nodes[i].style.fill = 'red';
            }
            diagram.dataBind();
        },
            gesture: {
                key: Keys.G,
                keyModifiers: KeyModifiers.Shift
            }
        }]
    }
}

The command is executable at the moment or not. Property:`commandManager.commands.canExecute`

HTML
<ej-diagram id="diagramCore" width="1000" height="600"  [commandManager]="commandManager">
</ej-diagram>
Script
commandManager: Object;
constructor() {
    this.commandManager = { commands: {
        "clone": {
            gesture: {
                key: Keys.C,
                keyModifiers: KeyModifiers.Shift
            },
            canExecute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                return diagram.model.selectedItems.children.length;
            },
            execute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                diagram.copy();
                diagram.paste();
                }
            }
        }
    }
});
Property:`commandManager.commands.canExecute`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
public commandManager: CommandManager;
ngOnInit(): void {
    this.commandManager = {
    commands: [{
        name: 'customCopy',
        parameter: 'node',
        canExecute: function() {
            if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
                return true;
            }
            return false;
        },
        execute: function() {
            for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
                diagram.selectedItems.nodes[i].style.fill = 'red';
            }
            diagram.dataBind();
        },
        gesture: {
            key: Keys.G,
            keyModifiers: KeyModifiers.Shift
            }
        }]
    }
}

Defines what to be executed when the key combination is recognized Property:`commandManager.commands.execute`

HTML
<ej-diagram id="diagramCore" width="1000" height="600"  [commandManager]="commandManager">
</ej-diagram>
Script
commandManager: Object;
constructor() {
    this.commandManager = { commands: {
        "clone": {
            gesture: {
                key: Keys.C,
                keyModifiers: KeyModifiers.Shift
            },
            canExecute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                return diagram.model.selectedItems.children.length;
            },
            execute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                diagram.copy();
                diagram.paste();
                }
            }
        }
    }
});
Property:`commandManager.commands.execute`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
public commandManager: CommandManager;
    ngOnInit(): void {
        this.commandManager = {
        commands: [{
            name: 'customCopy',
            parameter: 'node',
            canExecute: function() {
                if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
                    return true;
                }
                return false;
            },
            execute: function() {
                for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
                    diagram.selectedItems.nodes[i].style.fill = 'red';
                }
                diagram.dataBind();
            },
            gesture: {
                key: Keys.G,
                keyModifiers: KeyModifiers.Shift
                }
            }]
        }
    }

Defines a combination of keys and key modifiers, on recognition of which the command will be executed Property:`commandManager.commands.gesture`

HTML
<ej-diagram id="diagramCore" width="1000" height="600" [commandManager]="commandManager">
</ej-diagram>
Script
commandManager: Object;
constructor() {
    this.commandManager = { commands: {
        "clone": {
            gesture: {
                key: Keys.C,
                keyModifiers: KeyModifiers.Shift
            },
            canExecute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                return diagram.model.selectedItems.children.length;
            },
            execute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                diagram.copy();
                diagram.paste();
                }
            }
        }
    }
});
Property:`commandManager.commands.gesture`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
public commandManager: CommandManager;
ngOnInit(): void {
    this.commandManager =  {
    commands: [{
        name: 'customCopy',
        parameter: 'node',
        canExecute: function() {
            if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
                return true;
            }
            return false;
        },
        execute: function() {
            for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
                diagram.selectedItems.nodes[i].style.fill = 'red';
            }
            diagram.dataBind();
        },
        gesture: {
            key: Keys.G,
            keyModifiers: KeyModifiers.Shift
            }
        }]
    }
}

Sets the key value, on recognition of which the command will be executed Property:`commandManager.commands.gesture.key`

HTML
<ej-diagram id="diagramCore" width="1000" height="600"  [commandManager]="commandManager">
</ej-diagram>
Script
commandManager: Object;
constructor() {
    this.commandManager = { commands: {
        "clone": {
            gesture: {
                key: Keys.C,
                keyModifiers: KeyModifiers.Shift
            },
            canExecute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                return diagram.model.selectedItems.children.length;
            },
            execute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                diagram.copy();
                diagram.paste();
                }
            }
        }
    }
});
Property:`commandManager.commands.gesture.key`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
commandManager: Object;
constructor() {
    this.commandManager = {
        commands: [{
        name: 'customCopy',
        parameter: 'node',
        canExecute: function() {
            if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
                return true;
            }
            return false;
        },
        execute: function() {
            for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
                diagram.selectedItems.nodes[i].style.fill = 'red';
            }
            diagram.dataBind();
        },
        gesture: {
            key: Keys.G,
            keyModifiers: KeyModifiers.Shift
            }
        }]
    }
}

Sets a combination of key modifiers, on recognition of which the command will be executed. Property:`commandManager.commands.gesture.keyModifiers`

HTML
<ej-diagram id="diagramCore" width="1000" height="600"  [commandManager]="commandManager">
</ej-diagram>
Script
commandManager: Object;
constructor() {
    this.commandManager = {
    commands: {
        "clone": {
            gesture: {
                key: Keys.C,
                keyModifiers: KeyModifiers.Shift
            },
            canExecute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                return diagram.model.selectedItems.children.length;
            },
            execute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                diagram.copy();
                diagram.paste();
                }
            }
        }
    }
});
Property:`commandManager.commands.gesture.keyModifiers`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
public commandManager: CommandManager;
ngOnInit(): void {
    this.commandManager = {
    commands: [{
        name: 'customCopy',
        parameter: 'node',
        canExecute: function() {
            if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
                return true;
            }
            return false;
        },
        execute: function() {
            for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
                diagram.selectedItems.nodes[i].style.fill = 'red';
            }
            diagram.dataBind();
        },
        gesture: {
            key: Keys.G,
            keyModifiers: KeyModifiers.Shift
            }
        }]
    }
}

Defines any additional parameters that are required at runtime Property:`commandManager.commands.parameter`

HTML
<ej-diagram id="diagramCore" width="1000" height="600"  bridgeDirection = "Bottom" >
</ej-diagram>
Script
commandManager: Object;
constructor() {
    this.commandManager = {
        commands: {
        "clone": {
            parameter : "node",
            gesture: {
                key: Keys.C,
                keyModifiers: KeyModifiers.Shift
            },
            canExecute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                return diagram.model.selectedItems.children.length;
            },
            execute: function(args) {
                let diagram = $("#diagramcontent").ejDiagram("instance");
                diagram.copy();
                diagram.paste();
                }
            }
        }
    }
});
Property:`commandManager.commands.parameter`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
public commandManager: CommandManager;
ngOnInit(): void {
    this.commandManager = {
    commands: [{
        name: 'customCopy',
        parameter: 'node',
        canExecute: function() {
            if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
                return true;
            }
            return false;
        },
        execute: function() {
            for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
                diagram.selectedItems.nodes[i].style.fill = 'red';
            }
            diagram.dataBind();
        },
        gesture: {
            key: Keys.G,
            keyModifiers: KeyModifiers.Shift
            }
        }]
    }
}

Connectors

Behaviour API in Essential JS 1 API in Essential JS 2
addInfo Property:`connectors.addInfo`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
    <e-connectors>
        <e-connector id='connectr' addInfo="addInfo">
        </e-connector>
    </e-connectors>
</ej-diagram>
Script
public addInfo;
constructor() {
    var addInfo = {
        Description: "Bidirectional Flow"
    };
}
Property:`connectors.addInfo`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" >
    <e-connectors>
        <e-connector id='connectr' addInfo="addInfo">
        </e-connector>
    </e-connectors>
</ejs-diagram>
Script
public addInfo: object[];
ngOnInit(): void {
     this.addInfo = {
        Description: "Bidirectional Flow"
    };
}
Defines the bridgeSpace of connector Property:`connectors.bridgeSpace`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
    var connector = {
        name: "connector",
        sourcePoint: {
            x: 100,
            y: 100
        },
        targetPoint: {
            x: 200,
            y: 200
        },
        bridgeSpace: 15,
    };
    this.connectors = [connector];
}
Property:`connectors.bridgeSpace`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
 let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
bridgeSpace: 15,
targetPoint: {
    x: 600,
    y: 200
}
}];
}
Enables or disables the behaviors of connectors Property:`connectors.constraints`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
    var ConnectorConstraints = ConnectorConstraints;

    var connector = {
        name: "connector",
        sourcePoint: {
            x: 100,
            y: 100
        },
        targetPoint: {
            x: 200,
            y: 200
        },
        constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select
    };
    this.connectors = [connector];
}
Property:`connectors.constraints`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    constraints: ConnectorConstraints.Default | ConnectorConstraints.Drag
}];
    }
Defines the radius of the rounded corner Property:`connectors.cornerRadius`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
    var connector = {
        name: "connector",
        sourcePoint: {
            x: 100,
            y: 100
        },
        targetPoint: {
            x: 200,
            y: 200
        },
        cornerRadius: 10, segments:[{ type: "orthogonal"}]
    };
    this.connectors = [connector];
}
Property:`connectors.cornerRadius`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    cornerRadius: 10,
    type: 'Orthogonal',
}];
    }
cssClass Property:`connectors.cssClass`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
    var connector = {
        name: "connector",
        sourcePoint: {
            x: 100,
            y: 100
        },
        targetPoint: {
            x: 200,
            y: 200
        },
        cssClass: "hoverConnector"
    };
    this.connectors = [connector];
}
Not applicable
Alignment Property:`connectors.horizontalAlign`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
    var connector = {
        name: "connector",
        sourcePoint: {
            x: 100,
            y: 100
        },
        targetPoint: {
            x: 200,
            y: 200
        },
        horizontalAlign:HorizontalAlignment.Right
    };
    this.connectors = [connector];
}
Not applicable
A collection of JSON objects where each object represents a label Property:`connectors.labels`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
    var connector = {
        name: "connector",
        sourcePoint: {
            x: 100,
            y: 100
        },
        targetPoint: {
            x: 200,
            y: 200
        },
        labels:[{ text:"connector" }]
    };
    this.connectors = [connector];
}
Property:`connectors.annotations`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
annotations: [{ id: 'label', content: 'Text', offset: 0.5 }]
}];
}
stroke color of the connector Property:`connectors.lineColor`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
    let connector = {
    name: "connector",
    sourcePoint: {
    x: 100,
    y: 100
    },
    targetPoint: {
    x: 200,
    y: 200
    },
    lineColor:"blue"
    };
    this.connectors = [connector];

}

Property:`connectors.style.strokeColor`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
style: { strokeColor: 'blue' },
}];
}
Sets the pattern of dashes and gaps used to stroke the path of the connector Property:`connectors.lineDashArray`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    lineColor:"blue", lineDashArray: "2,2"
};

this.connectors = [connector];
}
Property:`connectors.style.strokeDashArray`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2' },
}];
}
Sets the width of the line Property:`connectors.lineWidth`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    lineWidth: 10
};

this.connectors = [connector];
}
Property:`connectors.style.strokeWidth`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2' },
}];
}
Defines the padding value to ease the interaction with connectors Property:`connectors.lineHitPadding`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    linehitPadding: 15
};

this.connectors = [connector];
}
Property:`connectors.hitPadding`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    hitPadding: 10
    }];
    }

Defines the minimum space to be left between the bottom of parent bounds and the connector Property:`connectors.marginBottom`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    marginBottom: 15
};

this.connectors = [connector];
}
Property:`connectors.margin.bottom`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    margin: { bottom: 3 }
    }];
    }

Defines the minimum space to be left between the top of parent bounds and the connector Property:`connectors.marginTop`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    marginTop: 15
};

this.connectors = [connector];
}
Property:`connectors.margin.top`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
margin: { top: 3 }
}];
}

Defines the minimum space to be left between the left of parent bounds and the connector Property:`connectors.marginLeft`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    marginLeft: 15
};

this.connectors = [connector];
}
Property:`connectors.margin.left`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    margin: { left: 3 }
   }];
    }

Defines the minimum space to be left between the right of parent bounds and the connector Property:`connectors.marginRight`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    marginRight: 15
};

this.connectors = [connector];
}
Property:`connectors.margin.right`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
     let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    margin: { right: 3 }
      }];
    }

Sets a unique name for the connector Property:`connectors.name`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
};

this.connectors = [connector];
}
Property:`connectors.id`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    }
     }];
    }

Defines the transparency of the connector Property:`connectors.opacity`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    opacity: 0.5
};

this.connectors = [connector];
}
Property:`connectors.style.opacity`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2', opacity: 0.5 },
}];
}

Sets the parent name of the connector. Property:`connectors.parent`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    parent:"group"
};
let group = { name :"group", children:["connector"] };

this.connectors = [connector];
}
Not applicable
An array of JSON objects where each object represents a segment Property:`connectors.segments`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    segments: [{type:"straight", point: { x:75, y:150 }}]
};
this.connectors = [connector];
}
Property:`connectors.segments`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    segments: [
        { type: 'Orthogonal', length: 30, direction: 'Bottom' },
        { type: 'Orthogonal', length: 80, direction: 'Right' }]
      }];
    }

Sets the direction of orthogonal segment Property:`connectors.segments.direction`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    segments: [{type:"straight", point: { x:75, y:150 }, direction:"bottom"}]
};

this.connectors = [connector];
}
Property:`connectors.segments.direction`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
     let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    segments: [
        { type: 'Orthogonal', length: 30, direction: 'Bottom' },
        { type: 'Orthogonal', length: 80, direction: 'Right' }]
      }];
    }

Describes the length of orthogonal segment Property:`connectors.segments.length`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    segments: [{type:"straight", point: { x:75, y:150 }, length:50 }]
};

this.connectors = [connector];
}
Property:`connectors.segments.length`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
      let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    segments: [
        { type: 'Orthogonal', length: 30, direction: 'Bottom' },
        { type: 'Orthogonal', length: 80, direction: 'Right' }]
     }];
    }

Describes the end point of bezier/straight segment Property:`connectors.segments.point`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    segments: [{type:"straight", point: { x:75, y:150 } }]
};
this.connectors = [connector];
}
Property:`connectors.segments.point`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
      let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    segments: [
        { type: 'Straight', point: { x: 800, y: 50 } }]
       }];
    }

Defines the first control point of the bezier segment Property:`connectors.segments.point1`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    segments: [{ type:"bezier", point1: { x:150, y:50} }]
};

this.connectors = [connector];
}
Property:`connectors.segments.point1`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
     let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    segments: [{
        type: 'Bezier',
        point: { x: 600, y: 300 },
        point1: { x: 525, y: 475 }
    }]
     }];
    }

Defines the second control point of bezier segment Property:`connectors.segments.point2`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    segments: [{ type:"bezier", point1: { x:150, y:50}, point2:{ x: 150, y: 150 } }]
};

this.connectors = [connector];
}
Property:`connectors.segments.point2`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
       let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    segments: [{
        type: 'Bezier',
        point: { x: 600, y: 300 },
        point1: { x: 525, y: 475 },
        point2: { x: 575, y: 475 }
    }]
     }];
    }

Sets the type of the segment Property:`connectors.segments.type`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    segments: [{ type: Segments.Bezier }]
};

this.connectors = [connector];
}
Property:`connectors.segments.type`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    segments: [{
        type: 'Bezier',
        point: { x: 600, y: 300 },
        point1: { x: 525, y: 475 },
        point2: { x: 575, y: 475 }
    }]
}];
    }

Describes the length and angle between the first control point and the start point of bezier segment Property:`connectors.segments.vector1`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    segments: [{ type:"bezier",
    vector1: { distance:75, angle: 0},
    vector2: { distance:75, angle: 180} }]
};

this.connectors = [connector];
}
Property:`connectors.segments.vector1`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
     let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    segments: [{
        type: 'Bezier',
        point: { x: 900, y: 160 },
        vector1: { angle: 20, distance: 75 },
        vector2: { angle: 20, distance: 75 }
        }],
    }];
    }

Describes the length and angle between the second control point and end point of bezier segment Property:`connectors.segments.vector2`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    segments: [
        { type:"bezier",
        vector1: { distance:75, angle: 0},
        vector2: { distance:75, angle: 180}
    }]
};

this.connectors = [connector];
}
Property:`connectors.segments.vector2`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    segments: [{
        type: 'Bezier',
        point: { x: 900, y: 160 },
        vector1: { angle: 20, distance: 75 },
        vector2: { angle: 20, distance: 75 }
    }]
     }];
    }

Sets the type of the connector Property:`connectors.shape.type`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    shape: { type: "bpmn"},
    segments: [{ type:"straight" }]
};

this.connectors = [connector];
}
Property:`connectors.shape.type`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
     let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    segments: [{
        type: 'Bezier',
        point: { x: 600, y: 300 },
        point1: { x: 525, y: 475 },
        point2: { x: 575, y: 475 }
    }],
    shape: { type: 'Bpmn', flow: 'Message', message: 'InitiatingMessage' }
  }];
    }

Defines the source decorator of the connector Property:`connectors.sourceDecorator`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    sourceDecorator: { shape:"openarrow" }
};

this.connectors = [connector];
}
Property:`connectors.sourceDecorator`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    sourceDecorator: {
        shape: 'Arrow',
        },
}];
    }

Sets the border color of the source decorator Property:`connectors.sourceDecorator.borderColor`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    sourceDecorator: { shape:"openarrow", borderColor:"red" }
};

this.connectors = [connector];
}
Property:`connectors.sourceDecorator.style.strokeColor`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
    x: 500,
    y: 100
},
targetPoint: {
    x: 600,
    y: 200
},
sourceDecorator: {
    shape: 'Arrow',
    style: { strokeColor: 'red' },
    },
}];
}

Sets the border width of the decorator Property:`connectors.sourceDecorator.borderWidth`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    sourceDecorator: { shape:"openarrow", borderWidth: 5 }
};

this.connectors = [connector];
}
Property:`connectors.sourceDecorator.style.strokeWidth: 5`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
     let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    sourceDecorator: {
        shape: 'Arrow', strokeWidth: 5
        },
      }];
    }

Defines to customize sourceDecorator appearance using user-defined CSS Property:`connectors.sourceDecorator.cssClass`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    sourceDecorator: { shape:"openarrow", cssClass:"hoverDecorator" }
};

this.connectors = [connector];
}
Not applicable
Sets the fill color of the source decorator Property:`connectors.sourceDecorator.fillColor`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    sourceDecorator: { shape:"openarrow", fillColor:"red" }
};

this.connectors = [connector];
}
Property:`connectors.sourceDecorator.style.fill`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    sourceDecorator: {
        shape: 'Arrow', fill: 'black'
        },
     }];
    }

Sets the height of the source decorator Property:`connectors.sourceDecorator.height`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    sourceDecorator: {  width: 10, height:10 }
};

this.connectors = [connector];
}
Property:`connectors.sourceDecorator.height`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
     let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    sourceDecorator: {
        shape: 'Arrow',
        height: 10, width: 10
        },
       }];
    }

Defines the custom shape of the source decorator Property:`connectors.sourceDecorator.pathData`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    sourceDecorator: { shape:"path", pathData:"M 376.892, 225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" }
};

this.connectors = [connector];
}
Property:`connectors.sourceDecorator.pathData`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
     let connectors: ConnectorModel[] = [{
     id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
     sourceDecorator: {
        shape: 'Custom',
        pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
        },
      }];
    }

Defines the shape of the source decorator. Property:`connectors.sourceDecorator.shape`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    sourceDecorator: { shape: DecoratorShapes.Circle }
};

this.connectors = [connector];
}
Property:`connectors.sourceDecorator.shape`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    sourceDecorator: {
        shape: 'Arrow',
        },
        }];
    }

Defines the width of the source decorator Property:`connectors.sourceDecorator.width`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    sourceDecorator: { shape:"openarrow", width: 10, height:10 }
};

this.connectors = [connector];
}
Property:`connectors.sourceDecorator.width`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
      let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    sourceDecorator: {
        shape: 'Arrow',
        width: 10, height:10
        },
     }];
    }

Sets the source node of the connector Property:`connectors.sourceNode`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" nodes="nodes" >
</ej-diagram>
Script
public connectors;
constructor() {
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
    name: "connector",
    sourceNode:"source", targetNode:"target"
};

this.connectors = [connector];
}
Property:`connectors.sourceID`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
      let nodes: NodeModel[] = [
    {
        id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
    },
    {
        id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
    }];
       let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourceID: 'source', targetID: 'target'
       }];
    }

Defines the space to be left between the source node and the source point of a connector Property:`connectors.sourcePadding`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" nodes="nodes" >
</ej-diagram>
Script
public connectors;
constructor() {
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
    name: "connector",
    sourceNode:"source", targetNode:"target",
    sourcePadding: 2, targetPadding: 2
};

this.connectors = [connector];
}
Property:`connectors.hitPadding`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
      let nodes: NodeModel[] = [
    {
        id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
    },
    {
        id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
    }];
   let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    hitPadding: 2
    sourceID: 'source', targetID: 'target'
      }];
    }

Describes the start point of the connector Property:`connectors.sourcePoint`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint:{x:100, y:100},
    targetPoint:{x:200, y:200}
};

this.connectors = [connector];
}
Property:`connectors.sourcePoint`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
      let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: { x: 100, y: 100 },
    targetPoint: { x: 200, y: 200 },
   }];
    }

Sets the source port of the connector Property:`connectors.sourcePort`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" nodes="nodes" >
</ej-diagram>
Script
public connectors;
constructor() {
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50,
            ports:[{ name:"port", offset: { x:1, y:0.5 } }] };
let node2 = {name:"target", offsetX:200, offsetY:200, width: 50, height: 50,
            ports:[{ name:"port1", offset: { x:0, y:0.5 } }] };
let connector = { name:"connector",
                sourceNode:"source", targetNode:"target",
                sourcePort: "port", targetPort:"port1" };
this.connectors = [connector];
}
Property:`connectors.sourcePortID`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
     let nodeport1: PointPortModel = { id: 'port', shape: 'Square', offset: { x: 1, y: 0.5 } };
      let nodeport2: PointPortModel = { id: 'port1', shape: 'Square', offset: { x: 0, y: 0.5 } };
         let nodes: NodeModel[] = [
        {
        id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90, ports: [nodeport1]
    },
    {
        id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90, ports: [nodeport2]
    }];

    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourceID: 'source', targetID: 'target',
    sourcePortID: 'port',
    targetPortID: 'port1',
 }];
    }
Defines the target decorator of the connector Property:`connectors.targetDecorator`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    targetDecorator: { shape:"openarrow" }
};

this.connectors = [connector];
}
Property:`connectors.targetDecorator`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
     let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    targetDecorator: {
        shape: 'Arrow',
        },
}];
    }

Sets the border color of the target decorator Property:`connectors.targetDecorator.borderColor`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors"  >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    targetDecorator: { shape:"openarrow", borderColor:"red" }
};

this.connectors = [connector];
}
Property:`connectors.targetDecorator.style.strokeColor`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
      let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    targetDecorator: {
        shape: 'Arrow',
        style: { strokeColor: 'red' },
        },
     }];
    }

Sets the border width of the decorator Property:`connectors.targetDecorator.borderWidth`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    targetDecorator: { shape:"openarrow", borderWidth: 5 }
};

this.connectors = [connector];
}
Property:`connectors.targetDecorator.style.strokeWidth: 5`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
      let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    targetDecorator: {
        shape: 'Arrow', strokeWidth: 5
        },
}];
    }

Defines to customize target Decorator appearance using user-defined CSS Property:`connectors.targetDecorator.cssClass`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors"  >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    targetDecorator: { shape:"openarrow", cssClass:"hoverDecorator" }
};

this.connectors = [connector];
}
Not applicable
Sets the fill color of the target decorator Property:`connectors.targetDecorator.fillColor`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    targetDecorator: { shape:"openarrow", fillColor:"red" }
};

this.connectors = [connector];
}
Property:`connectors.targetDecorator.style.fill`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    targetDecorator: {
        shape: 'Arrow', fill: 'black'
        },
}];
    }

Sets the height of the target decorator Property:`connectors.targetDecorator.height`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    targetDecorator: {  width: 10, height:10 }
};

this.connectors = [connector];
}
Property:`connectors.targetDecorator.height`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    targetDecorator: {
        shape: 'Arrow',
        height: 10, width: 10
        },
     }];
    }

Defines the custom shape of the target decorator Property:`connectors.targetDecorator.pathData`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    targetDecorator: { shape:"path", pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" }
};

this.connectors = [connector];
}
Property:`connectors.targetDecorator.pathData`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    targetDecorator: {
        shape: 'Custom',
        pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
        },
      }];
    }

Defines the shape of the target decorator. Property:`connectors.targetDecorator.shape`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    targetDecorator: { shape: DecoratorShapes.Circle }
};

this.connectors = [connector];
}
Property:`connectors.targetDecorator.shape`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
      let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    targetDecorator: {
        shape: 'Arrow',
        },
}];
    }

Defines the width of the target decorator Property:`connectors.targetDecorator.width`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    },
    targetDecorator: { shape:"openarrow", width: 10, height:10 }
};

this.connectors = [connector];
}
Property:`connectors.targetDecorator.width`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
      let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: {
        x: 500,
        y: 100
    },
    targetPoint: {
        x: 600,
        y: 200
    },
    targetDecorator: {
        shape: 'Arrow',
        width: 10, height:10
        },
}];

Sets the target node of the connector Property:`connectors.targetNode`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes" >
</ej-diagram>
Script
public connectors;
constructor() {
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
    name: "connector",
    sourceNode:"source", targetNode:"target"
};

this.connectors = [connector];
}
Property:`connectors.targetID`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
      let nodes: NodeModel[] = [
    {
        id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
    },
    {
        id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
    }];
      let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourceID: 'source', targetID: 'target'
     }];
    }

Defines the space to be left between the target node and the target point of a connector Property:`connectors.targetPadding`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes" >
</ej-diagram>
Script
public connectors;
constructor() {
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
    name: "connector",
    sourceNode:"source", targetNode:"target",
    sourcePadding: 2, targetPadding: 2
};

this.connectors = [connector];
}
Property:`connectors.hitPadding`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
      let nodes: NodeModel[] = [
    {
        id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
    },
    {
        id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
    }];
      let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    hitPadding: 2
    sourceID: 'source', targetID: 'target'
    }];
    }

Describes the start point of the connector Property:`connectors.targetPoint`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name: "connector",
    sourcePoint:{x:100, y:100},
    targetPoint:{x:200, y:200}
};

this.connectors = [connector];
}
Property:`connectors.targetPoint`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
      let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourcePoint: { x: 100, y: 100 },
    targetPoint: { x: 200, y: 200 },
}];
    }

Sets the target port of the connector Property:`connectors.targetPort`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ej-diagram>
Script
public connectors;
constructor() {
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50,
            ports:[{ name:"port", offset: { x:1, y:0.5 } }] };
let node2 = {name:"target", offsetX:200, offsetY:200, width: 50, height: 50,
            ports:[{ name:"port1", offset: { x:0, y:0.5 } }] };
let connector = { name:"connector",
                sourceNode:"source", targetNode:"target",
                sourcePort: "port", targetPort:"port1" };

this.connectors = [connector];
}
Property:`connectors.targetPortID`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ejs-diagram>
Script
    public connectors: ConnectorModel[];
    ngOnInit(): void {
    let nodeport1: PointPortModel = { id: 'port', shape: 'Square', offset: { x: 1, y: 0.5 } };
    let nodeport2: PointPortModel = { id: 'port1', shape: 'Square', offset: { x: 0, y: 0.5 } };
    let nodes: NodeModel[] = [
    {
        id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90, ports: [nodeport1]
    },
    {
        id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90, ports: [nodeport2]
    }];

let connectors: ConnectorModel[] = [{
    id: 'connector',
    type: 'Straight',
    sourceID: 'source', targetID: 'target',
    sourcePortID: 'port',
    targetPortID: 'port1',
}];
    }

Defines the tooltip that should be shown when the mouse hovers over connector Property:`connectors.tooltip`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
<script type="text/x-jsrender" id="mouseovertooltip">
 <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
    <span style="padding: 5px;">  </span>
 </div>
 </script>
Script
public connectors;
constructor() {
let tooltip = {
    templateId: "mouseovertooltip",
    alignment: {
        horizontal: "center",
        vertical: "bottom"
        }
    };
let ConnectorConstraints = ConnectorConstraints;
let connector = {
    name: "flow",sourcePoint: { x:100, y: 100 }, targetPoint :{ x:200, y:200 },
    constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritTooltip,
    tooltip:tooltip
    };

this.connectors = [connector];
}
Property:`connectors.tooltip`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: { x:100, y: 100 }, targetPoint :{ x:200, y:200 },
constraints: ConnectorConstraints.Default | ConnectorConstraints.Tooltip,
tooltip: {
    content: 'Connector',
    position: 'TopCenter', showTipPointer: true,
},
}];
}

Sets the vertical alignment of connector Property:`connectors.verticalAlign`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
    name:"connector",
    sourcePoint:{x:100, y:100}, targetPoint:{x:150, y:150},
    verticalAlign:VerticalAlignment.Bottom };

this.connectors = [connector];
}
Not applicable
Enables or disables the visibility of connector Property:`connectors.visible`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ej-diagram>
Script
public connectors;
constructor() {
let connector = { name:"connector",
                sourcePoint:{x:100, y:100},
                targetPoint:{x:200, y:200},
                visible: true
                };

this.connectors = [connector];
}
Property:`connectors.visible`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
visible: true
}];

}

Sets the z-index of the connector Property:`connectors.zOrder`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ej-diagram>
Script
public connectors;
constructor() {
let connector = { name:"connector",
                sourcePoint:{x:100, y:100},
                targetPoint:{x:200, y:200},
                zOrder: 4 };
this.connectors = [connector];
}
Property:`connectors.zIndex`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
zIndex: 1
}];
}

Binds the custom JSON data with connector properties Property:`connectors.connectorTemplate`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" connectorTemplate = "connectorTemplate" dataSourceSettings = "dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
public connectorTemplate;
constructor() {
 let data = [
    { "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
    { "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" }
    ];
dataSourceSettings = { id: "Id", parent: "ReportingPerson", dataSource: data },
connectorTemplate :"connectorTemplate"

public connectorTemplate(diagram, connector) {
     if(connector.sourceNode && connector.targetNode){
        connector.linecolor = "green";
        }
 }
}
Not applicable
Enables/Disables the default behaviors of the diagram Property:`constraints`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" >
</ej-diagram>
Script
let DiagramConstraints = DiagramConstraints;

public constraints;
constructor() {
let constraints =  DiagramConstraints.Default | DiagramConstraints.Bridging;

this.connectors = [connector];
}
Property:`constraints`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints">
</ejs-diagram>
Script
public constraints: DiagramConstraints;
ngOnInit(): void {
this.constraints =DiagramConstraints.Default | DiagramConstraints.Bridging
}

ContextMenu

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the collection of context menu items Property:`contextMenu.items`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
 </ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
    let menuitems = [{ "name": "hyperLink" }];
    this.contextMenu = {items: menuitems };
    this.enableContextMenu = true;
}

Property:`contextMenuSettings.items`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px"  [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = {   show: true,
items: [{
    text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy'
    }],
}
}
Defines the text for the collection of context menu item Property:`contextMenu.items.text`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
 </ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
    let menuitems = [{ "text": "ZoomIn" }];
    this.contextMenu = {items: menuitems };
    this.enableContextMenu = true;
}
Property:`contextMenuSettings.items.text`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px"  [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = {   show: true,
items: [{
    text: 'ZoomIn'
    }],
}
}

Defines the name for the collection of context menu items Property:`contextMenu.items.name`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
 </ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
    let menuitems = [{ "name": "hyperLink" }];
    this.contextMenu = {items: menuitems };
    this.enableContextMenu = true;
}
Property:`contextMenuSettings.items.id`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px"  [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = {   show: true,
items: [{
    text: 'delete', id: 'delete'
    }]
}
}

Defines the image url for the collection of context menu items Property:`contextMenu.items.imageUrl`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
 </ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
    let menuitems = [{ "name": "zoomin", "text": "ZoomIn","imageUrl": "Images/zoomin.png", "style": "" }];
    this.contextMenu = {items: menuitems };
    this.enableContextMenu = true;
}
Property:`contextMenuSettings.items.url`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px"  [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = {   show: true,
items: [{
    'id': 'zoomin', 'text': 'ZoomIn','url': 'Images/zoomin.png',
    }],
}
}

Defines the cssClass for the collection of context menu items Property:`contextMenu.items.cssClass`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
 </ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
    let menuitems = [{ "name": "zoomin", "text": "ZoomIn","imageUrl": "Images/zoomin.png", "cssClass":"menu", "style": "" }];
    this.contextMenu = {items: menuitems };
    this.enableContextMenu = true;
}
Property:`contextMenuSettings.items.iconCss`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px"  [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = {   show: true,
items: [{
    text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy'
    }],
}
}

Defines the collection of sub items for the context menu items Property:`contextMenu.items.subItems`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
 </ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
    this.contextMenu = {
        // Defines the custom context menu items
        items: [{
            name: "zoom",
            // Text to be displayed
            text: "Zoom",
            // Defines the sub items
            subItems: [{name: "zoomIn", text: "ZoomIn"}, {name: "zoomOut",text: "ZoomOut"}]
        }]
    };
    this.enableContextMenu = true;
}
Property:`contextMenuSettings.items`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px"  [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = {   show: true,
items: [{
    text: 'Zoom', id: 'zoom',
    items: [{name: "zoomIn", text: "ZoomIn"}, {name: "zoomOut",text: "ZoomOut"}]
    }],
showCustomMenuOnly: false,
}
}

set whether to display the default context menu items or not Property:`contextMenu.showCustomMenuItemsOnly`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
 </ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
    this.contextMenu = { showCustomMenuItemsOnly: true };
    this.enableContextMenu = true;
}
Property:`contextMenuSettings.showCustomMenuOnly`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px"  [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = {
    showCustomMenuOnly: false,
}
}

separator Not applicable Property:`contextMenuSettings.items.separator`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px"  [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = {
    show: true, items: [{
        text: 'Save', id: 'save', target: '.e-diagramcontent',
        iconCss: 'e-save', separator: true
    },
    {
        text: 'Load', id: 'load', target: '.e-diagramcontent',
        iconCss: 'e-load'
    },
}
}

Define the target to show the menu item. Not applicable Property:`contextMenuSettings.items.target`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px"  [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = {   show: true,
items: [{
    text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy'
    }],
showCustomMenuOnly: false,
}
}

Enables/Disables the context menu items Not applicable Property:`contextMenuSettings.show`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px"  [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = {   show: true,
items: [{
    text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy'
    }],
showCustomMenuOnly: false,
}
}

DataSourceSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the data source either as a collection of objects or as an instance of ej.DataManager Property:`dataSourceSettings.dataSource`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
 let data = [
        { "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
        { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" }];

        this.dataSourceSettings = { dataSource: data }
}
Property:`dataSourceSettings.dataManager`

HTML
 <ejs-diagram #diagram id="diagram" width="850px" height="700px" [dataSourceSettings]="dataSourceSettings">
 </ejs-diagram>
Script
public diagram: DiagramComponent;
public dataSourceSettings: Object;
ngOnInit(): void {
    let items: object[] = [
    { "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
    { "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
        this.dataSourceSettings = {  dataManager: items}
}

Sets the unique id of the data source items Property:`dataSourceSettings.id`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
 let data = [
        { "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
        { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" }];

        this.dataSourceSettings = { id: "Id", dataSource: data }
}
Property:`dataSourceSettings.id`

HTML
 <ejs-diagram #diagram id="diagram" width="850px" height="700px" [dataSourceSettings]="dataSourceSettings">
 </ejs-diagram>
Script
public diagram: DiagramComponent;
public dataSourceSettings: Object;
ngOnInit(): void {
    let items: object[] = [
    { "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
    { "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
        this.dataSourceSettings = { id: 'Id', dataManager: items }
}

Defines the parent id of the data source item Property:`dataSourceSettings.parent`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
 let data = [
        { "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
        { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" }];

        this.dataSourceSettings = { id: "Id", parent: "ReportingPerson", dataSource: data }
}
Property:`dataSourceSettings.parentId`

HTML
 <ejs-diagram #diagram id="diagram" width="850px" height="700px" [dataSourceSettings]="dataSourceSettings">
 </ejs-diagram>
Script
public diagram: DiagramComponent;
public dataSourceSettings: Object;
ngOnInit(): void {
    let items: object[] = [
    { "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
    { "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
        this.dataSourceSettings = { id: 'Id', parentId: 'ReportingPerson', dataManager: items }
}

Describes query to retrieve a set of data from the specified datasource Property:`dataSourceSettings.query`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings =  {
    dataSource: ej.DataManager({
        url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
    }),
    query: ej.Query().from("Employees").select("EmployeeID,ReportsTo,FirstName"),
    tableName: "Employees",
    id: "EmployeeID",
    parent: "ReportsTo"
}
}
Not applicable
Sets the unique id of the root data source item Property:`dataSourceSettings.root`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
 let data = [{
    "Id": "E1",
    "Name": "Maria Anders",
    "Designation": "Managing Director"
},
{
    "Id": "E2",
    "Name": "Ana Trujillo",
    "Designation": "Project Manager",
    "ReportingPerson": "E1"
}
];
this.dataSourceSettings = {
    id: "Id",
    parent: "ReportingPerson",
    root: "E1",
    dataSource: data
}
}
Property:`dataSourceSettings.root`

HTML
 <ejs-diagram #diagram id="diagram" width="850px" height="700px" [dataSourceSettings]="dataSourceSettings">
 </ejs-diagram>
Script
public diagram: DiagramComponent;
public dataSourceSettings: Object;
ngOnInit(): void {
    let items: object[] = [
    { "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
    { "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
        this.dataSourceSettings = { id: 'Id', parentId: 'ReportingPerson', dataManager: items, root: 'E1' }
}

Describes the name of the table on which the specified query has to be executed Property:`dataSourceSettings.tableName`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
    dataSource: ej.DataManager({
        url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
    }),
    query: ej.Query().from("Employees").select("EmployeeID,ReportsTo,FirstName"),
    //Table name
    tableName: "Employees",
    id: "EmployeeID",
    parent: "ReportsTo"
}
}
Not applicable
Specifies the method name which is used to get the updated data from client side to the server side Property:`dataSourceSettings.crudAction`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                crudAction:
                {
                    read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes"
                    }
            }
}
Not applicable
Specifies the create method which is used to get the nodes to be added from client side to the server side Property:`dataSourceSettings.crudAction.create`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                crudAction:
                {
                    create: "http://js.syncfusion.com/demos/ejservices/api/Diagram/AddNodes",
                    }
            }
}
Not applicable
Specifies the update method which is used to get the updated data from client side to the server side Property:`dataSourceSettings.crudAction.update`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                crudAction:
                {
                  update: "http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateNodes",
                }
        }
}
Not applicable
Specifies the destroy method which is used to get the deleted items data from client side to the server side Property:`dataSourceSettings.crudAction.destroy`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                crudAction:
                {
                    destroy: "http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteNodes"
                    }
            }
}
Not applicable
Specifies the read method to get the created nodes from client side to the server side Property:`dataSourceSettings.crudAction.read`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
 let data = [
        this.dataSourceSettings = {
                id: "Name",
                crudAction:
                {
                    read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes";
                }
            }
}
Not applicable
Defines the data source either as a collection of objects or as an instance of ej.DataManager Property:`dataSourceSettings.customFields`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
    id: 'Name',
    customFields: [
        "Description",
        "Color"
        ]
    }
}
Property:`dataSourceSettings.data`

HTML
 <ejs-diagram #diagram id="diagram" width="850px" height="700px" [dataSourceSettings]="dataSourceSettings">
 </ejs-diagram>
Script
public diagram: DiagramComponent;
public dataSourceSettings: Object;
ngOnInit(): void {
        this.dataSourceSettings = { id: 'Name',
    customFields: [
        "Description",
        "Color"
        ] }
}

Defines the data source either as a collection of objects or as an instance of ej.DataManager Property:`dataSourceSettings.connectionDataSource`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name"
                }
            }
}
Not applicable
Sets the datasource for the connection datasource settings items Property:`dataSourceSettings.connectionDataSource.dataSource`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
 let data = [{
    "Id": "E1",
    "Name": "Maria Anders",
    "Designation": "Managing Director"
},
{
    "Id": "E2",
    "Name": "Ana Trujillo",
    "Designation": "Project Manager",
    "ReportingPerson": "E1"
}
];
this.dataSourceSettings = {
id: "Name",
connectionDataSource: {
    id: "Name",
    dataSource: data
}
}
Not applicable
Sets the unique id of the connection data source item Property:`dataSourceSettings.connectionDataSource.id`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name"
                }
            }
}
Not applicable
Sets the source node of the connection data source item Property:`dataSourceSettings.connectionDataSource.sourceNode`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name",
                    sourceNode: "sourceNode",
                }
            }
}
Not applicable
Sets the target node of the connection data source item Property:`dataSourceSettings.connectionDataSource.targetNode`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name",
                    targetNode: "targetNode"
                }
            }
}
Not applicable
Sets the sourcePointX value of the connection data source item Property:`dataSourceSettings.connectionDataSource.sourcePointX`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name",
                    sourcePointX:200
                }
            }
}
Not applicable
Sets the sourcePointY value of the connection data source item Property:`dataSourceSettings.connectionDataSource.sourcePointY`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name",
                    sourcePointY:200
                }
            }
}
Not applicable
Sets the targetPoint-x value of the connection data source item Property:`dataSourceSettings.connectionDataSource.targetPointX`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name",
                    targetPointX:200
                }
            }
}
Not applicable
Sets the targetPoint-y value of the connection data source item Property:`dataSourceSettings.connectionDataSource.targetPointY`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name",
                    targetPointY:200
                }
            }
}
Not applicable
Specifies the method name which is used to get updated connectors from client side to the server side Property:`dataSourceSettings.connectionDataSource.crudAction`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name",
                    sourceNode: "sourceNode",
                    targetNode: "targetNode",
                    crudAction: {
                    read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors"
                    }
                }
            }
}
Not applicable
Specifies the create method which is used to get the connectors to be added from client side to the server side Property:`dataSourceSettings.connectionDataSource.crudAction.create`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name",
                    sourceNode: "sourceNode",
                    targetNode: "targetNode",
                    crudAction: {
                    create: "http://js.syncfusion.com/demos/ejservices/api/Diagram/AddConnectors",
                    }
                }
            }
}
Not applicable
Specifies the update method which is used to get the updated connectors from client side to the server side Property:`dataSourceSettings.connectionDataSource.crudAction.update`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name",
                    crudAction: {
                     update: "http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateConnectors",
                    }
                }
            }
}
Not applicable
Specifies the destroy method which is used to get the deleted items data from client side to the server side Property:`dataSourceSettings.connectionDataSource.crudAction.destroy`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name",
                    crudAction: {
                    destroy: "http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteConnectors"
                    }
                }
            }
}
Not applicable
Specifies the read method which is used to get the data from client side to the server side Property:`dataSourceSettings.connectionDataSource.crudAction.read`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name",
                    crudAction: {
                    read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors"
                    }
                }
            }
}
Not applicable
Specifies the custom fields to get the updated data from client side to the server side Property:`dataSourceSettings.connectionDataSource.customFields`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSource]="dataSourceSettings">
 </ej-diagram>
Script
public dataSourceSettings;
constructor() {
        this.dataSourceSettings = {
                id: "Name",
                connectionDataSource:
                {
                    id: "Name",
                    customFields: [ "Description", "Color"]
                }
            }
}
Not applicable
Binds the custom data with node model Property:`dataSourceSettings.doBinding`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [dataSourceSettings]="dataSourceSettings" layout="layout">
 </ej-diagram>
Script
public dataSourceSettings;
public layout;
constructor() {
        this.layout = { type: 'HierarchicalTree', verticalSpacing: 40 }
        this.dataSourceSettings = {
    id: 'Name', parentId: 'ReportingPerson', dataManager: items,
    doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {
        nodeModel.annotations = [{
            content: data['Name'], margin: { top: 10 }
        }];
    }
}
}
Not applicable

DefaultSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Initializes the default values for nodes and connectors Property:`defaultSettings.node`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [defaultSettings]="defaultSettings">
 </ej-diagram>
Script
public defaultSettings;
constructor() {
    this.defaultSettings = { node: { fillColor:"red"} };
}
Property:`getNodeDefaults`

HTML
 <ejs-diagram #diagram id="diagram" width="850px" height="700px" [getNodeDefaults]="getNodeDefaults">
 </ejs-diagram>
Script
public diagram: DiagramComponent;
public getNodeDefaults(node: NoderModel, diagram: Diagram): NodeModel   {
    node.style = { fill: 'lightgrey', strokeColor: 'none', strokeWidth: 2 };
return node;

}

Initializes the default connector properties Property:`defaultSettings.connector`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [defaultSettings]="defaultSettings">
 </ej-diagram>
Script
public defaultSettings;
constructor() {
    this.defaultSettings = { connector: { lineColor:"red", lineWidth:4, lineDashArray:"2,2" } };
}
Property:`getConnectorDefaults`

HTML
 <ejs-diagram #diagram id="diagram" width="850px" height="700px" [getConnectorDefaults]="getConnectorDefaults">
 </ejs-diagram>
Script
public diagram: DiagramComponent;
public getConnectorDefaults(connector: ConnectorModel, diagram: Diagram): ConnectorModel   {
    connector= {
    targetDecorator: { shape: 'None' },
    type: 'Orthogonal'
};
return connector;

}

Initializes the default properties of groups Property:`defaultSettings.group`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [defaultSettings]="defaultSettings">
 </ej-diagram>
Script
public defaultSettings;
constructor() {
    this.defaultSettings = { group: {constraints: NodeConstraints.Default & ~NodeConstraints.Drag } };
}
Not applicable

DrawType

Behaviour API in Essential JS 1 API in Essential JS 2
Sets the type of JSON object to be drawn through drawing tool Property:`drawType`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [drawType]="drawType">
 </ej-diagram>
Script
public drawType;
constructor() {
    this.drawType ={type:"node"};
}
Property:`drawingObject`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px"(created)='diagramCreate($event)'>
</ejs-diagram>
Script
public diagram: DiagramComponent;
    public diagramCreate(args: Object): void {
    this.diagram.drawingObject = {id: 'connector', type: 'Straight'};
}

EnableAutoScroll

Behaviour API in Essential JS 1 API in Essential JS 2
Enables or disables auto scroll in diagram Property:`enableAutoScroll`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [enableAutoScroll]="enableAutoScroll">
 </ej-diagram>
Script
public enableAutoScroll;
constructor() {
    this.enableAutoScroll = false;
}
Property:`canAutoScroll`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [canAutoScroll]='canAutoScroll'>
</ejs-diagram>
Script
public canAutoScroll:boolean;
ngOnInit(): void {
this.canAutoScroll= true;
}

EnableContextMenu

Behaviour API in Essential JS 1 API in Essential JS 2
Enables or disables diagram context menu Property:`enableContextMenu`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu">
 </ej-diagram>
Script
public enableContextMenu;
constructor() {
    this.enableContextMenu = false;
}
Property:`contextMenuSettings.show`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [contextMenuSettings]='contextMenuSettings'>
</ejs-diagram>
Script
public contextMenuSettings;
ngOnInit(): void {
this. contextMenuSettings: {
    show: true
}
}

EnablePersistence

Behaviour API in Essential JS 1 API in Essential JS 2
Enable or disable persisting component's state between page reloads/b> Not applicable Property:`enablePersistence`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [enablePersistence]="true">
 </ej-diagram>

EnableRtl

Behaviour API in Essential JS 1 API in Essential JS 2
Enable or disable rendering component in right to left direction Not applicable Property:`enableRtl`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [enableRtl]="true">
 </ej-diagram>

GetDescription

Behaviour API in Essential JS 1 API in Essential JS 2
Allows to get the custom description Not applicable Property:`getDescription`

HTML
 <ejs-diagram #diagram id="diagram" width="850px" height="700px" [getDescription]="getAccessibility" [nodes]="nodes">
</ejs-diagram>
Script
public getAccessibility(object: ConnectorModel, diagram: Diagram): string {
    let value: string;
    if (object instanceof Connector) {
        value = 'clicked on Connector';
    } else {
        value = undefined;
    }
    return value;
}
public nodes: NodeModel[] = [{
        id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
    },
    {
        id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
        shape: { type: 'Basic', shape: 'Ellipse' },
    }];
}

GetCustomTool

Behaviour API in Essential JS 1 API in Essential JS 2
Allows to get the custom tool Not applicable Property:`getCustomTool`

HTML

 <ejs-diagram #diagram id="diagram" width="850px" height="700px" [getDescription]="getTool" [nodes]="nodes">
</ejs-diagram>
Script
public getTool(action: string): ToolBase {
    let tool: ToolBase;
    if (action === 'userHandle') {
        tool = new CloneTool(diagram.commandHandler, true);
    }
    return tool;
}
public nodes: NodeModel[] = [{
        id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
    },
    {
        id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
        shape: { type: 'Basic', shape: 'Ellipse' },
    }];
}
class CloneTool extends ToolBase {
    public mouseDown(args: MouseEventArgs): void {
        super.mouseDown(args);
        diagram.copy();
        diagram.paste();
    }
}

Height

Behaviour API in Essential JS 1 API in Essential JS 2
Specifies the height of the diagram Property:`height`

HTML
<ej-diagram id="diagramCore" width="1000" height="600"  >
</ej-diagram>
Property:`height`

HTML
 <ejs-diagram #diagram id="diagram" height="700px" >
</ejs-diagram>

HistoryManager

Behaviour API in Essential JS 1 API in Essential JS 2
A method that takes a history entry as argument and returns whether the specific entry can be popped or not Property:`historyManager.canPop`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" >
 </ej-diagram>
Script
    let diagram = $("#diagramCore").ejDiagram("instance");

    let entry =  { object: diagram.node, prevState: diagram.node.EmployeeInfo };
    diagram.widget.model.historyManager.push(entry);
    let newValues = { role: "New role" };
    node.EmployeeInfo = newValues;
    //Pop if the change doesn't need to be tracked
    if(diagram.widget.model.historyManager.canPop(entry))
    diagram.widget.model.historyManager.pop();
Not applicable
A method that ends grouping the changes Property:`historyManager.closeGroupAction`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" >
 </ej-diagram>
Script
let group = this.diagram.widget.model.selectedItems;

        // Start to group the changes
        this.diagram.widget.model.historyManager.startGroupAction();

        //Makes the changes
        for(let i =0;i<this.group.children.length;i++) {
            let option = {};
            let item = this.group.children[i];
            // Updates the fillColor for all the child elements.
            option.fillColor = backgroundColor;
            this.diagram.widget.updateNode(item.name,option);
        }

        //Ends grouping the changes
        this.diagram.widget.model.historyManager.closeGroupAction();
Property:`historyList.endGroupAction`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes" [connectors] = "connectors">
 </ejs-diagram>
Script
public nodes= [{
        id: 'node1',
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
    },
    {
        offsetX: 200,
        offsetY: 200,
        width: 100,
        height: 100,
        id: 'node2'
    }],
    public connectors = [{
        id: 'connector1', sourcePoint: { x: 100, y: 200 },
        targetPoint: { x: 200, y: 300 },
        type: 'Orthogonal'
        }]
    });
    public created() {
        let objects: (NodeModel | ConnectorModel)[] = [];
            objects.push(this.diagram.nodes[0], this.diagram.nodes[1], this.diagram.connectors[0]);
            this.diagram.historyList.startGroupAction();
            this.diagram.distribute('Top', objects);
            this.diagram.distribute('Bottom', objects);
            this.diagram.distribute('BottomToTop', objects);
            this.diagram.historyList.endGroupAction();
    }

A method that removes the history of a recent change made in diagram Property:`historyManager.pop`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" (created)="created">
 </ejs-diagram>
Script
    public created() {
        let diagram = $("#diagramcontent").ejDiagram("instance");
        diagram.model.historyManager.pop();
    }
Not applicable
A method that allows to track the custom changes made in diagram Property:`historyManager.push`

HTML

 <ej-diagram id="diagramCore" width="1000" height="600" (created)="created">
 </ej-diagram>
Script
    public created() {
        let entry = { object: node, prevState: node.empInfo };
        this.diagram.model.historyManager.push(entry);
        let value = { role: "New role" };
        node.empInfo = value;
    }
Property:`historyList.push`

HTML

 <ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ejs-diagram>
Script
public nodes= [{
        id: 'node1',
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
    },
    {
        offsetX: 200,
        offsetY: 200,
        width: 100,
        height: 100,
        id: 'node2'
    }],
    public created() {
        let object = diagram.nodes[0];
    object['description'] = (document.getElementById('custom') as HTMLSelectElement).value;
    let entry: HistoryEntry = { undoObject: object };
    this.diagram.historyList.push(entry);
    this.diagram.dataBind();
    }

Defines what should be happened while trying to restore a custom change Property:`historyManager.redo`

HTML

 <ej-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ej-diagram>
Script
public historyManager;
this.historyManager: {
        undo: customUndoRedo,
        redo: customUndoRedo
    }
    public created() {
    let diagram = $("#diagramcontent").ejDiagram("instance");
    let node: Node = args.object;
    let currentState = node.empInfo;

    node.empInfo = args.prevState;

    args.prevState = currentState;
    }
Property:`historyList.redo`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ejs-diagram>
Script
public nodes= [{
        id: 'node1',
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
    },
    {
        offsetX: 200,
        offsetY: 200,
        width: 100,
        height: 100,
        id: 'node2'
    }],
    public created() {

        let node1: NodeModel = this.diagram.nodes[0];
node1['customName'] = 'customNode';
let entry = {
    undoObject: node1
};
this.diagram.historyList.push(entry);
this.diagram.historyList.undo = function(args: HistoryEntry) {
    args.redoObject = cloneObject(args.undoObject) as NodeModel;
    args.undoObject['customName'] = 'customNodeChange';
}
this.diagram.historyList.redo = function(args: HistoryEntry) {
    let current: NodeModel = cloneObject(args.undoObject) as NodeModel;
    args.undoObject['customName'] = args.redoObject['customName'];
    args.redoObject = current;
}
    }

Gets the number of redo actions to be stored on the history manager. Its an read-only property and the collection should not be modified Property:`historyManager.redoStack`

let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.redoStack();
Property:`historyList.redoStack`

HTML

 <ej-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ej-diagram>
Script
 public  nodes= [{
    offsetX: 100,
    offsetY: 100,
    width: 100,
    height: 100,
}]
public created() {
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.historyList.redoStack();
}

Restricts the undo and redo actions to a certain limit Property:`historyManager.stackLimit`

HTML

 <ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ejs-diagram>
Script
 public  nodes= [{
    offsetX: 100,
    offsetY: 100,
    width: 100,
    height: 100,
}]
public created() {
this.diagram.model.historyManager.stackLimit();
}
Not applicable
A method that starts to group the changes to revert/restore them in a single undo or redo Property:`historyManager.startGroupAction`

HTML

 <ej-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ej-diagram>
Script
 public  nodes= [{
    offsetX: 100,
    offsetY: 100,
    width: 100,
    height: 100,
}]
public created() {
let group = this.diagram.widget.model.selectedItems;

    // Start to group the changes
    this.diagram.widget.model.historyManager.startGroupAction();

    //Makes the changes
    for(let i =0;i<group.children.length;i++){
        let option = {};
        let item = group.children[i];
        // Updates the fillColor for all the child elements.
        option.fillColor = backgroundColor;
        this.diagram.widget.updateNode(item.name,option);
    }

    //Ends grouping the changes
    this.diagram.widget.model.historyManager.closeGroupAction();
}
Property:`historyList.startGroupAction`

HTML

 <ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ejs-diagram>
Script
 public  nodes= [{
    offsetX: 100,
    offsetY: 100,
    width: 100,
    height: 100,
}]
public created() {
let objects: (NodeModel | ConnectorModel)[] = [];
        objects.push(this.diagram.nodes[0], this.diagram.nodes[1], this.diagram.connectors[0]);
        this.diagram.historyList.startGroupAction();
        this.diagram.distribute('Top', objects);
        this.diagram.distribute('Bottom', objects);
        this.diagram.distribute('BottomToTop', objects);
        this.diagram.historyList.endGroupAction();
}
}

Defines what should be happened while trying to revert a custom change Property:`historyManager.undo`

HTML

 <ej-diagram id="diagramCore" width="1000" height="600" (created)="created">
 </ej-diagram>
Script
public historyManager;
this.historyManager: {
        undo: customUndoRedo,
        redo: customUndoRedo
    }
    public created() {
    let diagram = $("#diagramcontent").ejDiagram("instance");
    let node = args.object;
    let currentState = node.empInfo;

    node.empInfo = args.prevState;

    args.prevState = currentState;
    }
Property:`historyList.undo`

HTML

 <ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ejs-diagram>
Script
public nodes = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
    }]
this.historyManager: {
        undo: customUndoRedo,
        redo: customUndoRedo
    }
    public created() {
let node1: NodeModel = this.diagram.nodes[0];
node1['customName'] = 'customNode';
let entry = {
    undoObject: node1
};
this.diagram.historyList.push(entry);
this.diagram.historyList.undo = function(args: HistoryEntry) {
    args.redoObject = cloneObject(args.undoObject) as NodeModel;
    args.undoObject['customName'] = 'customNodeChange';
}
this.diagram.historyList.redo = function(args: HistoryEntry) {
    let current: NodeModel = cloneObject(args.undoObject) as NodeModel;
    args.undoObject['customName'] = args.redoObject['customName'];
    args.redoObject = current;
}
}
    }

Gets the number of undo actions to be stored on the history manager. Its an read-only property and the collection should not be modified Property:`historyManager.undoStack`

HTML

 <ej-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ej-diagram>
Script
public nodes = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
    }]
this.historyManager: {
        undo: customUndoRedo,
        redo: customUndoRedo
    }
    public created() {
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.undoStack();
}
}
    }
Property:`historyList.undoStack`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ejs-diagram>
Script
public nodes = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
    }]
    this.historyManager: {
        undo: customUndoRedo,
        redo: customUndoRedo
    }
    public created() {
        this.diagram.historyList.undoStack();
}

Set the current entry object Not applicable Property:`historyList.currentEntry`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ejs-diagram>
Script
public nodes = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
    }]
this.historyManager: {
        undo: customUndoRedo,
        redo: customUndoRedo
    }
    public created() {
    diagram.historyList.currentEntry();
    }

set the history entry can be undo Not applicable Property:`historyList.canUndo`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ejs-diagram>
Script
public nodes = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
    }]
this.historyManager: {
        undo: customUndoRedo,
        redo: customUndoRedo
    }
    public created() {
        diagram.historyList.canUndo = true;
    }

Set the history entry can be redo Not applicable Property:`historyList.canRedo`

HTML

 <ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ejs-diagram>
Script
public nodes = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
    }]
this.historyManager: {
        undo: customUndoRedo,
        redo: customUndoRedo
    }
    public created() {
        diagram.historyList.canUndo = true;
    }

Used to decide to stored the changes to history Property:`historyManager.canLog`

HTML

 <ej-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ej-diagram>
Script
public nodes = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
    }]

    public created() {
        let diagram = $("#diagramcontent").ejDiagram("instance");
        diagram.model.historyManager.canLog();
    }
Property:`historyList.canLog`

HTML

 <ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
 </ejs-diagram>
Script
public nodes = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
    }]

    public created() {
        diagram.historyList.canLog = function (entry: HistoryEntry) {
        entry.cancel = true;
        return entry;
    }
    }

LabelRenderingMode

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the type of the rendering mode of label Property:`labelRenderingMode`

HTML

 <ej-diagram id="diagramCore" width="1000" height="600"  [labelRenderingMode]="svg" >
 </ej-diagram>

Not applicable

Layout

Behaviour API in Essential JS 1 API in Essential JS 2
Specifies the custom bounds to arrange/align the layout Property:`layout.bounds`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
public layout;
this.layout = { bounds:{ x: 0, y: 0, width: 1000, height: 1000} };
Property:`layout.bounds`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
  public layout:object = { bounds: new Rect(0, 0, 500, 500) };

Defines the fixed node with reference to which, the layout will be arranged and fixed node will not be repositioned Property:`layout.fixedNode`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
public layout;
this.layout = { fixedNode: "node" };
Property:`layout.fixedNode`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
   public layout:object = { fixedNode: 'node'};
Customizes the orientation of trees/sub trees Property:`layout.getLayoutInfo`

HTML

 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
public layout;
constructor() {
    function getLayoutInfo(diagram, node, options) { options.orientation = "vertical"; options.type = "left"; };
    this.layout = { getLayoutInfo: getLayoutInfo };
}
Property:`layout.getLayoutInfo`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        getLayoutInfo: (node: Node, tree: TreeInfo) => {
            if (!tree.hasSubTree) {
                tree.orientation = 'vertical';
            }
        };

Defines a method to customize the segments based on source and target nodes Property:`layout.getConnectorSegments`

HTML

 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
public layout;
constructor() {
    function getLayoutInfo(diagram, node, options) { options.orientation = "vertical"; options.type = "left"; };
    this.layout = { getConnectorSegments:getConnectorSegment };
}
Property:`layout.connectorSegments`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        connectorSegments: 'Default'
        };

Sets the space to be horizontally left between nodes Property:`layout.horizontalSpacing`

HTML

 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
public layout;
constructor() {
    this.layout = {layout: { horizontalSpacing: 50 };
}
Property:`layout.horizontalSpacing`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        horizontalSpacing: 30
};

Defines the space to be left between layout bounds and layout Property:`layout.margin`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
public layout;
constructor() {
    this.layout = { margin:{ left: 10, right: 10, top: 10, bottom: 10} };
}
Property:`layout.margin`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        margin: { left: 50, top: 50, right: 0, bottom: 0 }
        };

Defines how to horizontally align the layout within the layout bounds Property:`layout.horizontalAlignment`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
public layout;
constructor() {
    this.layout = { horizontalAlignment:HorizontalAlignment.Center };
}
Property:`layout.horizontalAlignment`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        horizontalAlignment: 'Center'
        };

Defines how to vertically align the layout within the layout bounds Property:`layout.verticalAlignment`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
public layout;
constructor() {
    this.layout = {
    verticalAlignment:VerticalAlignment.Center
    };
}
Property:`layout.verticalAlignment`

HTML

 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        verticalAlignment: 'Center'
        };

Sets the orientation/direction to arrange the diagram elements Property:`layout.orientation`

HTML

 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
public layout;
constructor() {
    this.layout = { orientation: LayoutOrientations.LeftToRight };
}
Property:`layout.orientation`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        orientation: 'TopToBottom',}
};

Sets the type of the layout based on which the elements will be arranged Property:`layout.type`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
public layout;
constructor() {
    this.layout = {
type: LayoutTypes.HierarchicalTree }
};
Property:`layout.type`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        type: 'OrganizationalChart'
        };
};

Sets the space to be vertically left between nodes Property:`layout.verticalSpacing`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
    public layout;
    constructor() {
        this.layout = { verticalSpacing: 50 }
};
Property:`layout.verticalSpacing`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object =  {
        verticalSpacing: 30
        };
};

Sets the value is used to define the root node of the layout Property:`layout.root`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
public layout;
    constructor() {
        this.layout = { root: 'rootNode' }
};
Property:`layout.root`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        root: 'rootNode'
        };
};

Defines how long edges should be, ideally. This will be the resting length for the springs Property:`layout.springFactor`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
    public layout;
    constructor() {
        this.layout = { springFactor: 0.442 }
};
Property:`layout.springFactor`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
        maxIteration: 500,
        };
};

Defines how long edges should be, ideally. This will be the resting length for the springs Property:`layout.maxIteration`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
    public layout;
    constructor() {
        this.layout = { maxIteration: 442 }
};
Property:`layout.maxIteration`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
        maxIteration: 500,
        };
};

Defines how long edges should be, ideally. This will be the resting length for the springs Property:`layout.springLength`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ej-diagram>
Script
    public layout;
    constructor() {
        this.layout = { springLength: 80 }
};
Property:`layout.springLength`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
        maxIteration: 500,
        };
};

Sets how to define the connection direction (first segment direction & last segment direction) Not applicable Property:`layout.connectionDirection`

HTML

 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        connectionDirection:'Auto',
        type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
        maxIteration: 500,
        };
};

Enables/Disables animation option when a node is expanded/collapsed Not applicable Property:`layout.enableAnimation`

HTML

 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        enableAnimation: true,
        orientation: 'TopToBottom',
        type: 'OrganizationalChart', margin: { top: 20 },
        horizontalSpacing: 30, verticalSpacing: 30,
        };
};

Defines whether an object should be at the left/right of the mind map. Applicable only for the direct children of the root node Not applicable Property:`layout.getBranch`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
 </ejs-diagram>
Script
public layout:object = {
        type: 'MindMap',
        };
};

Locale

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the current culture of diagram Property:`locale`

HTML
<ej-diagram  id="diagramCore" width="100%" height="700px" [locale]="es-ES">
</ej-diagram>js-diagram>
Property:`locale`

HTML
 <ejs-diagram id="diagramCore" width="1000" height="600" [locale]="en-US" >
 </ejs-diagram>

Nodes

Property:`pageSettings.background.color`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [pageSettings]="pageSettings">
</ejs-diagram>
Script
public pageSettings: PageSettingsModel =  {
    background: {
        color: 'red',
        source: 'Clayton.png',
        scale: 'Meet',
        align: 'XMidYMid'
    }
}

Behaviour API in Essential JS 1 API in Essential JS 2
Array of JSON objects where each object represents a node Property:`nodes`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{ name: "node1", width: 175, height: 60, offsetX:100, offsetY:100}];
}
Property:`annotations.content`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public  nodes: NodeModel[] =[ {
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
}];

Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity Property:`nodes.activity`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
type: "bpmn", shape: BPMNShapes.Activity, activity: BPMNActivity.SubProcess, width:50, height:50
}];
}
Property:`nodes.shape.activity`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public  nodes: NodeModel[] =[ {
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    shape: {
        type: 'Bpmn',
        shape: 'Activity',
        activity: {
            activity: 'Task'
        },
    },
}];

To maintain additional information about nodes Property:`nodes.addInfo`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    let addInfo = { TooltipData: "Shares the information with the customer" };

    let node1 = { name: "node1", addInfo: addInfo, offsetX:100, offsetY:100, width:50, height:50 };

    let node2 = { type: "swimlane", name: "swimlane", addInfo: addInfo };
    this.nodes = [node1, node2];
}
Property:`nodes.addInfo`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public  nodes: NodeModel[] =[ {
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    addInfo: {
        "borderColor": "black", "borderWidth": '1px'
        },
}];

Defines the additional information of a process. It is not directly related to the message flows or sequence flows of the process Property:`nodes.annotation`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
    text: "This is a BPMN Activity shape", width: 100, height: 50,
    angle: -45, length: 150, direction: "top"
    }
}];
}
Property:`nodes.shape.annotations`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public  nodes: NodeModel[] =[ {
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    shape: {
        type: 'Bpmn',
        shape: 'DataObject',
        dataObject: {
            collection: true,
            type: 'Input'
        },
        annotations: [{
            id: 'left',
            angle: 45,
            length: 150,
            text: 'Left',
        }]
    }
}];

Sets the angle between the BPMN shape and the annotation Property:`nodes.annotation.angle`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
        this.nodes =  [{
    name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
    type:"bpmn", shape: "activity",
    annotation: {
        text: "This is a BPMN Activity shape", width: 100, height: 50,
        angle: -45
        }
    }];
    }
Property:`nodes.shape.annotations.angle`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public  nodes: NodeModel[] =[{
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    shape: {
        type: 'Bpmn',
        shape: 'DataObject',
        dataObject: {
            collection: true,
            type: 'Input'
        },
        annotations: [{
            id: 'left',
            angle: 45,
        }]
    }
}];

Sets the direction of the text annotation Property:`nodes.annotation.direction`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
        this.nodes = [{
    name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
    type:"bpmn", shape: "activity",
    annotation: {
        text: "This is a BPMN Activity shape", width: 100, height: 50,
        angle: -45, length: 150, direction: "top"
        }
    }];
    }
Not applicable
Sets the height of the text annotation Property:`nodes.annotation.height`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
        this.nodes = [{
    name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
    type:"bpmn", shape: "activity",
    annotation: {
        text: "This is a BPMN Activity shape", width: 100, height: 50,
        }
    }];
    }
Property:`nodes.shape.annotations.height`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[{
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    shape: {
        type: 'Bpmn',
        shape: 'DataObject',
        dataObject: {
            collection: true,
            type: 'Input'
        },
        annotations: [{
            id: 'left',
            text: 'Left',
            height: 50
        }]
    }
}];

Sets the distance between the BPMN shape and the annotation Property:`nodes.annotation.length`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
        this.nodes = [{
    name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
    type:"bpmn", shape: "activity",
    annotation: {
        text: "This is a BPMN Activity shape", width: 100, height: 50,
        length: 150
        }
    }];
    }
Property:`nodes.shape.annotations.length`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public  nodes: NodeModel[] =[{
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    shape: {
        type: 'Bpmn',
        shape: 'DataObject',
        dataObject: {
            collection: true,
            type: 'Input'
        },
        annotations: [{
            id: 'left',
            length: 150,
            text: 'Left',
        }]
    }
}];

Defines the additional information about the flow object in a BPMN Process Property:`nodes.annotation.text`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
    text: "This is a BPMN Activity shape"
    }
}];
}
Property:`nodes.shape.annotations.text`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public  nodes: NodeModel[] =[{
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    shape: {
        type: 'Bpmn',
        shape: 'DataObject',
        dataObject: {
            collection: true,
            type: 'Input'
        },
        annotations: [{
            text: 'Left',
        }]
    }
}];

Sets the width of the text annotation Property:`nodes.annotation.width`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
    text: "This is a BPMN Activity shape", width: 100, height: 50
    }
}];
}
Property:`nodes.shape.annotations.width`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public  nodes: NodeModel[] =[ {
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    shape: {
        type: 'Bpmn',
        shape: 'DataObject',
        dataObject: {
            collection: true,
            type: 'Input'
        },
        annotations: [{
            id: 'left',
            width: 45,
            text: 'Left',
        }]
    }
}];

Sets the id for the annotation Not applicable Property:`nodes.shape.annotations.id`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public  nodes: NodeModel[] =[{
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
    shape: {
        type: 'Bpmn',
        shape: 'DataObject',
        dataObject: {
            collection: true,
            type: 'Input'
        },
        annotations: [{
            id: 'left',
            text: 'Left',
        }]
    }
}];

Defines whether the group can be ungrouped or not Property:`nodes.canUngroup`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    let node1 = { name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "4,2"};
    let node2 = { name: "node2", width: 50, height:50, offsetX:150, offsetY:150, borderColor: "red" , borderDashArray: "4,2"};
    let group = { name :"group", children:[node1, node2], canUngroup: false };
    this.nodes = [group];
}
Not applicable
Array of JSON objects where each object represents a child node/connector Property:`nodes.children`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
   let node1 = { name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "4,2"};
   let node2 = { name: "node2", width: 50, height:50, offsetX:150, offsetY:150, borderColor: "red" , borderDashArray: "4,2"};

    let group = { name :"group", children:[node1, node2]};
    this.nodes =[group];
}
Property:`nodes.children`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [ group ];
public node1: NodeModel = {
    id: 'node1',
    offsetX: 250,
    offsetY: 250,
    width: 100,
    height: 100,
};
public node2: NodeModel = {
    id: 'node2',
    offsetX: 450,
    offsetY: 450,
    width: 100,
    height: 100,
};
public group: NodeModel = {
    id: 'group',children : ['node1', 'node2']
};

Sets the type of UML classifier Property:`nodes.classifier`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black",
type: "umlclassifier", classifier: ClassifierShapes.Class
}];
}
Not applicable
Defines the name, attributes and methods of a Class. Applicable, if the node is a Class Property:`nodes.class`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.Class,
"class": {
    name: "Patient",
}
}];
}
Not applicable
Sets the name of class Property:`nodes.class.name`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.Class,
"class": {
    name: "Patient",
}
}];
}
Not applicable
Defines the collection of attributes Property:`nodes.class.attributes`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.Class,
"class": {
    name: "Patient",
    attributes: [{ name: "accepted"}]
}
}];
}
Not applicable
Sets the name of the attribute Property:`nodes.class.attributes.name`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.Class,
"class": {
    name: "Patient",
    attributes: [{ name: "accepted" }]
}
}];
}
Not applicable
Sets the data type of attribute Property:`nodes.class.attributes.type`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.Class,
"class": {
    name: "Patient",
    attributes: [{ name: "accepted", type: "Date" }]
}
}];
}
Not applicable
Defines the visibility of the attribute Property:`nodes.class.attributes.scope`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.Class,
"class": {
    name: "Patient",
    attributes: [{ name: "accepted", type: "Date", scope:"protected" }]
}
}];
}
Not applicable
Defines the collection of methods of a Class Property:`nodes.class.methods`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =[{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.Class,
"class": {
    name: "Patient", methods: [{ name: "getHistory" }]
}
}];
}
Not applicable
Sets the name of the method Property:`nodes.class.methods.name`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.Class,
"class": {
    name: "Patient",
     methods: [{
        name: "getHistory",
        arguments: [{name: "Date" }]
     }]
}
}];
}
Not applicable
Defines the arguments of the method Property:`nodes.class.methods.arguments`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.Class,
"class": {
    name: "Patient",
    methods: [{
        name: "getHistory",
        arguments: [{
            name: "Date",
            type:"String"
            }]
        }]
}
}];
}
Not applicable
Defines the name, attributes and methods of a Class. Applicable, if the node is a Class Property:`nodes.class.methods.arguments.name`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.Class,
"class": {
    name: "Patient",
    methods: [
        {
        name: "getHistory",
        arguments: [
            { name: "Date" }
            ],
        type: "History"
        }]
    }
}];
}
Not applicable
Sets the type of the argument Property:`nodes.class.methods.arguments.type`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
    name: "Patient",
    offsetX: 100,
    offsetY: 100,
    borderWidth: 2,
    borderColor: "black",
    type: "umlclassifier",
    classifier: ClassifierShapes.Class,
    "class": {
        name: "Patient",
        methods: [
            {
            name: "getHistory",
            arguments: [
                { name: "Date" }
                ],
            type: "History"
            }]
    }
}];
}
Not applicable
Sets the return type of the method Property:`nodes.class.methods.type`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =[{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.Class,
"class": {
    name: "Patient",
    methods: [{
        name: "getHistory",
        arguments: [{name: "Date" }],
        type: "History" }]
}
}];
}
Not applicable
Sets the visibility of the method Property:`nodes.class.methods.scope`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.Class,
"class": {
    name: "Patient",
    methods: [{
        name: "getHistory",
        arguments: [{name: "Date" }],
        type: "History",
        scope:"protected" }]
}
}];
}
Not applicable
Defines the state of the node is collapsed Property:`nodes.collapseIcon`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] =  [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        collapseIcon: {
            shape:"arrowup",
            width:10,
            height:10
            },
        expandIcon: {
            height: 10,
            width: 10,
            shape: "ArrowDown"
            }
    }]
Property:`nodes.collapseIcon`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
        collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
    }];

Sets the border color for collapse icon of node Property:`nodes.collapseIcon.borderColor`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] =   [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        collapseIcon: {
            shape:"arrowup",
            width:10,
            height:10,
            borderColor: "red"
            },
        expandIcon: {
            height: 10,
            width: 10,
            shape: "ArrowDown",
            borderColor: "red"
            }
    }]
Property:`nodes.collapseIcon.borderColor`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        expandIcon: { height: 20, width: 20, shape: "ArrowDown", borderColor: 'red' },
        collapseIcon: { height: 20, width: 20, shape: "ArrowUp", borderColor: 'red' }
    }];

Sets the border width for collapse icon of node Property:`nodes.collapseIcon.borderWidth`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        collapseIcon: {
            shape:"arrowup",
            width:10,
            height:10,
            borderWidth: "2"
            },
        expandIcon: {
            height: 10,
            width: 10,
            shape: "ArrowDown",
            borderWidth: "2"
            }
    }]
Property:`nodes.collapseIcon.borderWidth`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel [] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        expandIcon: { height: 20, width: 20, shape: "ArrowDown", borderWidth: '2' },
        collapseIcon: { height: 20, width: 20, shape: "ArrowUp", borderWidth: '2' }
    }];

Sets the fill color for collapse icon of node Property:`nodes.collapseIcon.fillColor`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        collapseIcon: {
            shape:"arrowup",
            width:10,
            height:10,
            fillColor: "green"
            },
        expandIcon: {
            height: 10,
            width: 10,
            shape: "ArrowDown",
            fillColor: "green"
            }
    }]
Property:`nodes.collapseIcon.fill`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
        collapseIcon: { height: 20, width: 20, shape: "ArrowUp", fill: 'red' }
    }];

Defines the height for collapse icon of node Property:`nodes.collapseIcon.height`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        collapseIcon: {
            shape:"arrowup",
            width:10,
            height:10
            },
        expandIcon: {
            height: 10,
            width: 10,
            shape: "ArrowDown"
            }
    }]
Property:`nodes.collapseIcon.height`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
        collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
    }];

Sets the horizontal alignment of the icon Property:`nodes.collapseIcon.horizontalAlignment`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        collapseIcon: {
            shape:"arrowup",
            width:10,
            height:10,
            horizontalAlignment:HorizontalAlignment.Left
            },
        expandIcon: {
            height: 10,
            width: 10,
            shape: "ArrowDown",
            horizontalAlignment:HorizontalAlignment.Left
            }
    }]
Property:`nodes.collapseIcon.horizontalAlignment`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        expandIcon: { height: 20, width: 20, shape: "ArrowDown", horizontalAlignment:'Center' },
        collapseIcon: { height: 20, width: 20, shape: "ArrowUp", horizontalAlignment:'Center' }
    }]

To set the margin for the collapse icon of node Property:`nodes.collapseIcon.margin`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        collapseIcon: {
            shape:"arrowup",
            width:10,
            height:10,
            margin:{ left: 5 }
            },
        expandIcon: {
            height: 10,
            width: 10,
            shape: "ArrowDown",
            margin:{ left: 5 }
            }
    }]
Property:`nodes.collapseIcon.margin`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        ,
        expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red',
        margin:{ left: 5 } },
        collapseIcon: { height: 20, width: 20, shape: "ArrowUp",
        margin:{ left: 5 } }
    }]

Sets the fraction/ratio(relative to node) that defines the position of the icon Property:`nodes.collapseIcon.offset`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        collapseIcon: {
            shape:"arrowup",
            width:10,
            height:10,
            offset:Point(0,0.5)
            },
        expandIcon: {
            height: 10,
            width: 10,
            shape: "ArrowDown",
            offset:Point(0,0.5)
            }
    }]
Property:`nodes.collapseIcon.offset`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        expandIcon: { height: 20, width: 20, shape: "ArrowDown",
        offset: { x: 0, y: 0.5 } },
        collapseIcon: { height: 20, width: 20, shape: "ArrowUp",
        offset: { x: 0, y: 0.5 } }
    }];

Defines the shape of the collapsed state of the node Property:`nodes.collapseIcon.shape`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        collapseIcon: {
            shape:"arrowup",
            width:10,
            height:10
            },
        expandIcon: {
            height: 10,
            width: 10,
            shape: "arrowdown"
            }
    }]
Property:`nodes.collapseIcon.shape`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        ,
        expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
        collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
    }];

Sets the vertical alignment of the icon Property:`nodes.collapseIcon.verticalAlignment `

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        collapseIcon: {
            shape:"arrowup",
            width:10,
            height:10,
            verticalAlignment:VerticalAlignment.Top
            },
        expandIcon: {
            height: 10,
            width: 10,
            shape: "arrowdown",
            verticalAlignment:VerticalAlignment.Top
            }
    }]
Property:`nodes.collapseIcon.verticalAlignment `

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        ,
        expandIcon: { height: 20, width: 20, shape: "ArrowDown", verticalAlignment: 'Center' },
        collapseIcon: { height: 20, width: 20, shape: "ArrowUp", verticalAlignment: 'Center' }
    }]

Defines the custom content of the icon Not applicable Property:`nodes.collapseIcon.content`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        expandIcon: {
            height: 20,
            width: 20,
            shape: "Template",
            content: '<g><path d="M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455L0,90l7.975-23.522' +
                'c-4.023-6.606-6.34-14.354-6.34-22.637C1.635,19.628,21.416,0,45.818,0C70.223,0,90,19.628,90,43.841z M45.818,6.982' +
                'c-20.484,0-37.146,16.535-37.146,36.859c0,8.065,2.629,15.534,7.076,21.61L11.107,79.14l14.275-4.537' +
                'c5.865,3.851,12.891,6.097,20.437,6.097c20.481,0,37.146-16.533,37.146-36.857S66.301,6.982,45.818,6.982z M68.129,53.938' +
                'c-0.273-0.447-0.994-0.717-2.076-1.254c-1.084-0.537-6.41-3.138-7.4-3.495c-0.993-0.358-1.717-0.538-2.438,0.537' +
                'c-0.721,1.076-2.797,3.495-3.43,4.212c-0.632,0.719-1.263,0.809-2.347,0.271c-1.082-0.537-4.571-1.673-8.708-5.333' +
                'c-3.219-2.848-5.393-6.364-6.025-7.441c-0.631-1.075-0.066-1.656,0.475-2.191c0.488-0.482,1.084-1.255,1.625-1.882' +
                'c0.543-0.628,0.723-1.075,1.082-1.793c0.363-0.717,0.182-1.344-0.09-1.883c-0.27-0.537-2.438-5.825-3.34-7.977' +
                'c-0.902-2.15-1.803-1.792-2.436-1.792c-0.631,0-1.354-0.09-2.076-0.09c-0.722,0-1.896,0.269-2.889,1.344' +
                'c-0.992,1.076-3.789,3.676-3.789,8.963c0,5.288,3.879,10.397,4.422,11.113c0.541,0.716,7.49,11.92,18.5,16.223' +
                'C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z">' +
                '</path></g>'
        },
        collapseIcon: {
            height: 20,
            width: 20,
            shape: "ArrowUp"
        }
    }]

Defines the geometry of a path Not applicable Property:`nodes.collapseIcon.pathData`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        expandIcon: { height: 20, width: 20, shape: "Path", pathData: "M0,0 L0,100" },
        collapseIcon: { height: 20, width: 20, shape: "Path", pathData: "M0,0 L0,100" }
    }]

Defines the corner radius of the icon border Not applicable Property:`nodes.collapseIcon.cornerRadius`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        ,
        expandIcon: { height: 20, width: 20, shape: "ArrowDown", cornerRadius: 3},
        collapseIcon: { height: 20, width: 20, shape: "ArrowUp", cornerRadius: 3 }
    }]

Defines the space that the icon has to be moved from the icon border Not applicable Property:`nodes.collapseIcon.padding`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        expandIcon: { height: 20, width: 20, shape: "ArrowDown", padding: { left: 50 } },
        collapseIcon: { height: 20, width: 20, shape: "ArrowUp", padding: { left: 50 } }
    }]

Defines the distance to be left between a node and its connections(In coming and out going connections) Property:`nodes.connectorPadding`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        connectorPadding: 5
    }]
Not applicable
Enables or disables the default behaviors of the node Property:`nodes.constraints`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public NodeConstraints = NodeConstraints;
public nodes: NodeModel[] = [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        constraints: NodeConstraints.Default & ~NodeConstraints.Select
    }]
Property:`nodes.constraints`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =  [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        constraints: NodeConstraints.Default | NodeConstraints.Select
    }]

Defines how the child objects need to be arranged(Either in any predefined manner or automatically). Applicable, if the node is a group Property:`nodes.container`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
        let node1 = {
    name: "node1",
    width: 50,
    height: 50,
    borderColor: "red",
    borderDashArray: "4,2"
};
let node2 = {
    name: "node2",
    width: 50,
    height: 50,
    borderColor: "red",
    borderDashArray: "4,2"
};
let group = {
    name: "group",
    children: [node1, node2],
    container: {
        type: "stack"
    },
    offsetX: 200,
    offsetY: 100
};
this.nodes =  [group];
    }
Not applicable
Defines the orientation of the container. Applicable, if the group is a container Property:`nodes.container.orientation`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
let node1 = {
    name: "node1",
    width: 50,
    height: 50,
    borderColor: "red",
    borderDashArray: "4,2"
};
let node2 = {
    name: "node2",
    width: 50,
    height: 50,
    borderColor: "red",
    borderDashArray: "4,2"
};
let group = {
    name: "group",
    children: [node1, node2],
    container: {
        type: "stack",
        orientation: "horizontal"
    },
    offsetX: 200,
    offsetY: 100
};
    this.nodes =  [group];
    }
Not applicable
Sets the type of the container. Applicable if the group is a container. Property:`nodes.container.type`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
let node1 = {
    name: "node1",
    width: 50,
    height: 50,
    borderColor: "red",
    borderDashArray: "4,2"
};
let node2 = {
    name: "node2",
    width: 50,
    height: 50,
    borderColor: "red",
    borderDashArray: "4,2"
};
let group = {
    name: "group",
    children: [node1, node2],
    container: {
        type: ContainerType.Stack
    },
    offsetX: 200,
    offsetY: 100
};        this.nodes =  [group];
    }
Not applicable
Defines the corner radius of rectangular shapes Property:`nodes.cornerRadius`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        type:"basic",
        shape:"rectangle",
        cornerRadius:5
    }]
Not applicable
This property allows you to customize nodes appearance using user-defined CSS Property:`nodes.cssClass`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        cssClass: "hoverNode"
    }]
Not applicable
Defines the BPMN data object Property:`nodes.data.type`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] =  [{
    name: "dataobject",
    type: "bpmn",
    shape: BPMNShapes.DataObject,
    data: {
        type: BPMNDataObjects.Input
    },
    width: 50,
    height: 50,
    offsetX: 100,
    offsetY: 100
}]
Property:`nodes.shape.dataObject.type`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
    id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
    shape: {
        type: 'Bpmn',
        shape: 'DataObject',
        dataObject: {
            collection: false,
            type: 'Input'
        }
    }
    }]

Defines whether the BPMN data object is a collection or not Property:`nodes.data.collection`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
    name: "dataobject",
    type: "bpmn",
    shape: BPMNShapes.DataObject,
    data: {
        type: BPMNDataObjects.Input,
        collection: false
    },
    width: 50,
    height: 50,
    offsetX: 100,
    offsetY: 100
}]
Property:`nodes.shape.dataObject.collection`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
    id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
    shape: {
        type: 'Bpmn',
        shape: 'DataObject',
        dataObject: {
            collection: false,
            type: 'Input'
        }
    }
}]

Defines an Enumeration in a UML Class Diagram Property:`nodes.enumeration`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
    name: "Enums",
    offsetX: 100,
    offsetY: 100,
    borderWidth: 2,
    borderColor: "black",
    type: "umlclassifier",
    classifier: ClassifierShapes.Enumeration,
    enumeration: {
        name: "AccountType",
    }
}]
Not applicable
Sets the name of the Enumeration Property:`nodes.enumeration.name`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
    name: "Enums",
    offsetX: 100,
    offsetY: 100,
    borderWidth: 2,
    borderColor: "black",
    type: "umlclassifier",
    classifier: ClassifierShapes.Enumeration,
    enumeration: {
        name: "AccountType",
    }
}]
Not applicable
Defines the collection of enumeration members Property:`nodes.enumeration.members`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
    name: "Enums",
    offsetX: 100,
    offsetY: 100,
    borderWidth: 2,
    borderColor: "black",
    type: "umlclassifier",
    classifier: ClassifierShapes.Enumeration,
    enumeration: {
        name: "AccountType",
        members: [{ name: "CheckingAccount"}]
    }
}]
Not applicable
Sets the name of the enumeration member Property:`nodes.enumeration.members.name`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
    name: "Enums",
    offsetX: 100,
    offsetY: 100,
    borderWidth: 2,
    borderColor: "black",
    type: "umlclassifier",
    classifier: ClassifierShapes.Enumeration,
    enumeration: {
        name: "AccountType",
        members: [{ name: "CheckingAccount"}]
    }
}]
Not applicable
Sets the type of the BPMN Events. Applicable, if the node is a BPMN event Property:`nodes.event`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
    name: "nodeEvent",
    type: "bpmn",
    shape: "event",
    event: BPMNEvents.Intermediate,
    width: 50,
    height: 50
}]
Property:`nodes.shape.event`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        shape: {
            type: 'Bpmn', shape: 'Event',
            event: { event: 'Start', trigger: 'None' } }
}]

Defines the type of the trigger Property:`nodes.event.trigger`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] =  [{
    name: "nodeEvent",
    type: "bpmn",
    shape: BPMNShapes.Event,
    trigger: BPMNTriggers.None,
    width: 50,
    height: 50
}]
Property:`nodes.shape.event.trigger`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        shape: {
            type: 'Bpmn', shape: 'Event',
            event: { event: 'Start', trigger: 'None' } }
    }]

Defines whether the node can be automatically arranged using layout or not Property:`nodes.excludeFromLayout`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    public layout;
    constructor() {
    let node1 = {
    name: "node1",
    width: 50,
    height: 50,
    offsetX: 50,
    offsetY: 50,
    excludeFromLayout: true
    };

    let node2 = {
    name: "node2",
    width: 50,
    height: 50
    };
    let node3 = {
    name: "node3",
    width: 50,
    height: 50
    };
        this.nodes =  [node1, node2, node3];
        this.layout= {
        type: "hierarchicaltree"
    }
    }
Property:`nodes.excludeFromLayout`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes" [layout]="layout">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        id: 'node',
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        excludeFromLayout: true,
    },
    { id: 'node1', width: 70, height: 70, annotations: [{ content: 'node1' }] },
    { id: 'node2', width: 70, height: 70, annotations: [{ content: 'node2' }] };
]
public layout:object = {
    type: 'RadialTree',
}

Defines the fill color of the node Property:`nodes.fillColor`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
        let node1 = {
    name: "node1",
    width: 50,
    height: 50,
    offsetX: 50,
    offsetY: 50,
    fillColor:"red"};
    this.nodes =  [node1];
    }
Property:`nodes.style.fill`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        id: 'node',
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        style: { fill: 'red' }
        },
]

Sets the type of the BPMN Gateway. Applicable, if the node is a BPMN gateway Property:`nodes.gateway`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
        this.nodes =  [{
    name: "node1",
    width: 50,
    height: 50,
    offsetX: 50,
    offsetY: 50,
    type: "bpmn",
    shape: "gateway" ,
    gateway: BPMNGateways.Exclusive
    }];
    }
Property:`nodes.shape.gateway`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
        shape: { type: 'Bpmn', shape: 'Gateway', gateway: { type: 'Exclusive' }
        }
    }]

Paints the node with linear color transitions Property:`nodes.gradient.type`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
let gradient = {
    LinearGradient: {
        type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
            { color: "white", offset: 0 }, { color: "red", offset: 50 }]
    }
};
let node1 = {
    name: "node1",
    width: 50,
    height: 50,
    offsetX: 50,
    offsetY: 50,
    gradient: gradient
};
    this.nodes =  [node1];
}
Property:`nodes.style.gradient.type`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient1
        }
    }];
public stopscol: StopModel[] = [];
public stops1: StopModel = {
    color: 'white',
    offset: 0
};
stopscol.push(stops1);
public stops2: StopModel = {
    color: 'red',
    offset: 50
};
stopscol.push(stops2);
public gradient1: LinearGradientModel = {
    x1: 0,
    x2: 50,
    y1: 0,
    y2: 50,
    stops: stopscol,
    type: 'Linear'
};

Defines the x1 value of linear gradient Property:`nodes.gradient.LinearGradient.x1`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
    let gradient = {
    type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
    { color: "white", offset: 0}, { color: "red", offset: 50}]
};
let node1 = {
    name: "node1",
    width: 50,
    height: 50,
    offsetX: 50,
    offsetY: 50,
    gradient : gradient
    };
    this.nodes =  [node1];
    }
Property:`nodes.style.gradient.LinearGradient.x1`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient1
        }
    }]
public stopscol: StopModel[] = [];
public stops1: StopModel = {
    color: 'white',
    offset: 0
};
stopscol.push(stops1);
public stops2: StopModel = {
    color: 'red',
    offset: 50
};
stopscol.push(stops2);
public gradient1: LinearGradientModel = {
    x1: 0,
    x2: 50,
    y1: 0,
    y2: 50,
    stops: stopscol,
    type: 'Linear'
};

Defines the x2 value of linear gradient Property:`nodes.gradient.LinearGradient.x2`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
    let gradient = {
    LinearGradient:{
    type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
    { color: "white", offset: 0}, { color: "red", offset: 50}]
    }
};
let node1 = {
    name: "node1",
    width: 50,
    height: 50,
    offsetX: 50,
    offsetY: 50,
    gradient : gradient
    };
    this.nodes =  [node1];
    }
Property:`nodes.style.gradient.LinearGradient.x2`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =  [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient1
        }
    }]
public stopscol: StopModel[] = [];
public stops1: StopModel = {
    color: 'white',
    offset: 0
};
stopscol.push(stops1);
public stops2: StopModel = {
    color: 'red',
    offset: 50
};
stopscol.push(stops2);
public gradient1: LinearGradientModel = {
    x1: 0,
    x2: 50,
    y1: 0,
    y2: 50,
    stops: stopscol,
    type: 'Linear'
};

Defines the y1 value of linear gradient Property:`nodes.gradient.LinearGradient.y1`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
let gradient = {
    LinearGradient:{
    type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
    { color: "white", offset: 0}, { color: "red", offset: 50}]
    }
};
let node1 = {
    name: "node1",
    width: 50,
    height: 50,
    offsetX: 50,
    offsetY: 50,
    gradient : gradient
    };
            this.nodes =  [node1];
    }
Property:`nodes.style.gradient.LinearGradient.y1`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =  [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient1
        }
    }]
public stopscol: StopModel[] = [];
public stops1: StopModel = {
    color: 'white',
    offset: 0
};
stopscol.push(stops1);
public stops2: StopModel = {
    color: 'red',
    offset: 50
};
stopscol.push(stops2);
public gradient1: LinearGradientModel = {
    x1: 0,
    x2: 50,
    y1: 0,
    y2: 50,
    stops: stopscol,
    type: 'Linear'
};

Defines the y2 value of linear gradient Property:`nodes.gradient.LinearGradient.y2`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
let gradient = {
    LinearGradient:{
    type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
    { color: "white", offset: 0}, { color: "red", offset: 50}]
};
let node1 = {
    name: "node1",
    width: 50,
    height: 50,
    offsetX: 50,
    offsetY: 50,
    gradient : gradient
    };
        this.nodes =  [node1];
    }
Property:`nodes.style.gradient.LinearGradient.y2`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient1
        }
    }]
public stopscol: StopModel[] = [];
public stops1: StopModel = {
    color: 'white',
    offset: 0
};
stopscol.push(stops1);
public stops2: StopModel = {
    color: 'red',
    offset: 50
};
stopscol.push(stops2);
public gradient1: LinearGradientModel = {
    x1: 0,
    x2: 50,
    y1: 0,
    y2: 50,
    stops: stopscol,
    type: 'Linear'
};

Defines the type of gradient Property:`nodes.gradient.RadialGradient.type`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
    let node = {
    name: "node",
    width: 50,
    height: 50,
    offsetX: 100,
    offsetY: 100,
    gradient: {
        RadialGradient:{
        type: "radial",
        fx: 50,
        fy: 50,
        cx: 50,
        cy: 50,
        stops: [{
            color: "white",
            offset: 0
        }, {
            color: "red",
            offset: 100
        }]
    }
    }
};
this.nodes =  [node1];
}
Property:`nodes.style.gradient.type`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
public nodes: NodeModel[] = [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient
        }
    }]

Defines the position of the outermost circle Property:`nodes.gradient.RadialGradient.cx`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
    RadialGradient:{
    type: "radial",
    fx: 50,
    fy: 50,
    cx: 50,
    cy: 50,
    stops: [{
        color: "white",
        offset: 0
    }, {
        color: "red",
        offset: 100
    }]
}
}
};
this.nodes =  [node1];
}
Property:`nodes.style.RadialGradient.cx`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };

public nodes: NodeModel[] = [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient
        }
    }]

Defines the outer most circle of the radial gradient Property:`nodes.gradient.RadialGradient.cy`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
    let node = {
    name: "node",
    width: 50,
    height: 50,
    offsetX: 100,
    offsetY: 100,
    gradient: {
        RadialGradient:{
        type: "radial",
        fx: 50,
        fy: 50,
        cx: 50,
        cy: 50,
        stops: [{
            color: "white",
            offset: 0
        }, {
            color: "red",
            offset: 100
        }]
    }
    }
};
    this.nodes =  [node1];
    }
Property:`nodes.style.RadialGradient.cy`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };

public nodes: NodeModel[] = [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient
        }
    }]

Defines the innermost circle of the radial gradient Property:`nodes.gradient.RadialGradient.fx`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
    RadialGradient:{
    type: "radial",
    fx: 50,
    fy: 50,
    cx: 50,
    cy: 50,
    stops: [{
        color: "white",
        offset: 0
    }, {
        color: "red",
        offset: 100
    }]
}
}
}];
}
Property:`nodes.style.RadialGradient.fx`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };


public nodes: NodeModel[] = [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient
        }
}]

Defines the innermost circle of the radial gradient Property:`nodes.gradient.RadialGradient.fy`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
    RadialGradient:{
    type: "radial",
    fx: 50,
    fy: 50,
    cx: 50,
    cy: 50,
    stops: [{
        color: "white",
        offset: 0
    }, {
        color: "red",
        offset: 100
    }]
}
}
}];
}
Property:`nodes.style.RadialGradient.fy`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };

public nodes: NodeModel[] = [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient
        }
    }]

Defines the different colors and the region of color transitions Property:`nodes.gradient.RadialGradient.stops`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [ {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
    RadialGradient:{
    type: "radial",
    fx: 50,
    fy: 50,
    cx: 50,
    cy: 50,
    stops: [{
        color: "white",
        offset: 0
    }, {
        color: "red",
        offset: 100
    }]
}
}
}];
}
Property:`nodes.style.RadialGradient.stops`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };

public nodes: NodeModel[] = [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient
        }
    }]

Sets the color to be filled over the specified region Property:`nodes.gradient.stops.color`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
    RadialGradient:{
    type: "radial",
    fx: 50,
    fy: 50,
    cx: 50,
    cy: 50,
    stops: [{
        color: "white",
        offset: 0
    }, {
        color: "red",
        offset: 100
    }]
}
}
}];
}
Property:`nodes.style.gradient.stops.color`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };

public nodes: NodeModel[] = [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient
        }
    }]

Sets the position where the previous color transition ends and a new color transition starts Property:`nodes.gradient.stops.offset`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
    RadialGradient:{
    type: "radial",
    fx: 50,
    fy: 50,
    cx: 50,
    cy: 50,
    stops: [{
        color: "white",
        offset: 0
    }, {
        color: "red",
        offset: 100
    }]
}
}
}];
}
Property:`nodes.style.gradient.stops.offset`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };

public nodes: NodeModel[] = [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient
        }
    }]

Describes the transparency level of the region Property:`nodes.gradient.stops.opacity`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
    RadialGradient:{
    type: "radial",
    fx: 50,
    fy: 50,
    cx: 50,
    cy: 50,
    stops: [{
        color: "white",
        offset: 0
    }, {
        color: "red",
        offset: 100,
        opacity: 0.5
    }]
}
}
}];
}
Property:`nodes.style.gradient.stops.opacity`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 , opacity: 0.5}];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };

public nodes: NodeModel[] = [{
        id: 'node',
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
        style: {
            gradient: gradient
        }
    }]

Defines the header of a swimlane/lane Property:`nodes.header`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
type: "swimlane",
name: "swimlane",
header: {
    text: "Swimlane",
    fontSize: 12,
    bold: true
}
}];
}
Not applicable
Defines the height of the node Property:`nodes.height`

HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] =  [{
        name: "node",
        width: 100,
        height: 100,
        offsetX: 100,
        offsetY: 100,
}]
Property:`nodes.height`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
    }]

Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container Property:`nodes.horizontalAlign`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
let node1 = {
    name: "node1",
    width: 50,
    height: 50
};
let node2 = {
    name: "node2",
    width: 50,
    height: 50,
    horizontalAlign: HorizontalAlignment.Right
};
let group = {
    name: "group",
    children: [node1, node2],
    container: {
        type: "canvas"
    },
    offsetX: 200,
    offsetY: 100,
    minWidth: 200,
    minHeight: 200,
    fillColor: "red"
};
this.nodes =  [group];
    }
Not applicable
A read only collection of the incoming connectors/edges of the node Property:`nodes.inEdges`

let node = diagram.selectionList[0];
for(let i = 0; i < node.inEdges.length; i++){
    console.log(node.inEdges[i]);
};
Property:`nodes.height`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
    }]

Defines an interface in a UML interface Diagram Property:`nodes.interface`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black",
type: "umlclassifier", classifier: ClassifierShapes.interface
}];
}
Not applicable
Defines the name, attributes and methods of a Interface. Applicable, if the node is a Interface Property:`nodes.interface.name`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.interface,
"interface": {
    name: "Patient",
}
}];
}
Not applicable
Defines the collection of attributes Property:`nodes.interface.attributes`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.interface,
"interface": {
    name: "Patient",
    attributes: [{ name: "accepted"}]
}
}];
}
Not applicable
Sets the name of the attribute Property:`nodes.interface.attributes.name`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =[{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.interface,
"interface": {
    name: "Patient",
    attributes: [{ name: "accepted" }]
}
}];
}
Not applicable
Sets the data type of attribute Property:`nodes.interface.attributes.type`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.interface,
"interface": {
    name: "Patient",
    attributes: [{ name: "accepted", type: "Date" }]
}
}];
}
Not applicable
Defines the visibility of the attribute Property:`nodes.interface.attributes.scope`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.interface,
"interface": {
    name: "Patient",
    attributes: [{ name: "accepted", type: "Date", scope:"protected" }]
}

}]; }

Not applicable
Defines the collection of methods of a interface Property:`nodes.interface.methods`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.interface,
"interface": {
    name: "Patient", methods: [{ name: "getHistory" }]
}
}];
}
Not applicable
Sets the name of the method Property:`nodes.interface.methods.name`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.interface,
"interface": {
    name: "Patient",
     methods: [{
        name: "getHistory",
        arguments: [{name: "Date" }]
     }]
}
}];
}
Not applicable
Defines the arguments of the method Property:`nodes.interface.methods.arguments`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.interface,
"interface": {
    name: "Patient",
    methods: [{
        name: "getHistory",
        arguments: [{
            name: "Date",
            type:"String"
            }]
        }]
}
}];
}
Not applicable
Defines the name, attributes and methods of a interface. Applicable, if the node is a interface Property:`nodes.interface.methods.arguments.name`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.interface,
"interface": {
    name: "Patient",
    methods: [
        {
        name: "getHistory",
        arguments: [
            { name: "Date" }
            ],
        type: "History"
        }]
    }
}];
}
Not applicable
Sets the type of the argument Property:`nodes.interface.methods.arguments.type`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.interface,
"interface": {
    name: "Patient",
    methods: [
        {
        name: "getHistory",
        arguments: [
            { name: "Date" }
            ],
        type: "History"
        }]
}
}];
}
Not applicable
Sets the return type of the method Property:`nodes.interface.methods.type`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.interface,
"interface": {
    name: "Patient",
    methods: [{
        name: "getHistory",
        arguments: [{name: "Date" }],
        type: "History" }]
}
}];
}
Not applicable
Sets the visibility of the method Property:`nodes.interface.methods.scope`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ClassifierShapes.interface,
"interface": {
    name: "Patient",
    methods: [{
        name: "getHistory",
        arguments: [{name: "Date" }],
        type: "History",
        scope:"protected" }]
}
}];
}
Not applicable
Defines whether the sub tree of the node is expanded or collapsed Property:`nodes.isExpanded`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
    public nodes;
    constructor() {
let node1 = {
    name: "node1",
    width: 50,
    height: 50,
    offsetX: 50,
    offsetY: 50,
    isExpanded: false
};

let node2 = {
    name: "node2",
    width: 50,
    height: 50
};
let connector = {
    sourceNode: "node1",
    targetNode: "node2",
    name: "connector"
};
        this.nodes =  [node1, node2];
    }
Property:`nodes.isExpanded`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes" [connectors] = "connectors" [layout]= "layout">
</ejs-diagram>
Script
public nodes: NodeModel[] =  [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        id: 'node1',
        isExpanded: true,
    },
    {
    id: 'node2',
    width: 50,
    height: 50
    }]
    public connectors:ConnectorMode = [{
        sourceNode: 'node1',
        targetNode: 'node2',
        id: 'connector'
    }]
    public layout: object = {
        type: "hierarchicaltree"
    }

Sets the node as a swimlane Property:`nodes.isSwimlane`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
type: "swimlane",
name: "swimlane",
isSwimlane: true,
header: {
    text: "Swimlane",
    fontSize: 12,
    bold: true
}
}];
}
Not applicable
A collection of objects where each object represents a label Property:`nodes.labels`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
    name: "node",
    width: 100,
    height: 100,
    offsetX: 100,
    offsetY: 100,
    labels: [
        {
            text: "Label",
            fontColor: "Red"
        }
    ]
}];
}
Property:`nodes.annotations`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        annotations: [{
            content: 'Annotation'
        }]
}]

An array of objects where each object represents a lane. Applicable, if the node is a swimlane Property:`nodes.lanes`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
        name: "lane1",
        width: 200
    },
    {
        name: "lane2",
        width: 100
        }
    ]
}];
}
Not applicable
This property allows you to customize lanes appearance using user-defined CSS Property:`nodes.lanes.cssClass`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
        name: "lane1",
        width: 200
    },
    {
        name: "lane2",
        width: 100,
        cssClass:"hoverLane",
        addInfo: addInfo,
        fillColor:"lightgrey"
    }
]
}];
}
Not applicable
Defines the header of the lane Property:`nodes.lanes.header`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [ {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
        name: "lane1",
        width: 200
    },
    {
        name: "lane2",
        width: 100,
        header: {
            fillColor:"blue",
            fontColor:"white",
            text:"Function 1"
            }
    }
]
}];
}
Not applicable
Defines the width of lane Property:`nodes.lanes.width`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
        name: "lane1",
        width: 200,
        height: 200,
        zOrder:10
    },
    {
        name: "lane2",
        width: 100
    }
]

}]; }

Not applicable
An array of objects where each object represents a child node of the lane Property:`nodes.lanes.children`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
        name: "lane1",
        width: 200
    },
    {
        name: "lane2",
        width: 100,
        children:[{name:"process", width: 50, height: 50 }]
    }
]
}];
}
Not applicable
Defines the object as a lane Property:`nodes.lanes.isLane`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
        name: "lane1",
        width: 200,
        height: 200,
        isLane:true,
        orientation:"vertical"
    },
    {
        name: "lane2",
        width: 100
    }
]
}];
}
Not applicable
Defines the minimum space to be left between the bottom of parent bounds and the node Property:`nodes.margin`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
    name: "lane1",
    width: 200,
    children: [{
        name: "process",
        width: 50,
        height: 50,
        marginBottom: 50,
        marginLeft: 10,
        marginRight: 10,
        marginTop: 10
    }]
}]
}];
}
Property:`nodes.margin`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        margin : { left: 15, right: 15, top: 15, bottom: 15 }
}]

Defines the maximum height limit of the node Property:`nodes.maxHeight`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes =  [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
maxHeight: 100,
maxWidth: 100,
minHeight: 10,
minWidth: 10
}];
}
Property:`nodes.maxHeight`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[{
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
        maxHeight: 100,
        maxWidth: 100,
        minHeight: 10,
        minWidth: 10
    }]

Sets the unique identifier of the node Property:`nodes.name`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
}];
}
Property:`nodes.id`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
        id: 'node1'
        offsetX: 100,
        offsetY: 100,
        width: 100,
        height: 100,
}]

Defines the opaque of the node Property:`nodes.opacity`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
    this.nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
opacity: 0.5,
rotateAngle: 70
}];
}
Property:`nodes.style.opacity`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
    id: 'node1'
    offsetX: 100,
    offsetY: 100,
    width: 100,
    height: 100,
    rotateAngle: 70,
    style: {
        opacity: 0.5
    }
}]

Defines the minimum padding value to be left between the bottom most position of a group and its children. Applicable, if the group is a container Property:`nodes.paddingBottom`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600"  [nodes]="nodes" >
 </ej-diagram>
Script
public nodes;
constructor() {
let node1 = { name: "node1", width: 50, height:50};
let node2 = { name: "node2", width: 50, height:50, verticalAlign: "bottom"};
let group = { name :"group", children:[ node1, node2 ],
            container: { type: "canvas" }, offsetX:200, offsetY:100,
            fillColor:"gray", minWidth:200, minHeight:200,
            paddingBottom:10, paddingLeft:10, paddingRight:10, paddingTop:10
            };
            this.nodes = [group];
}
Not applicable
Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited” Property:`pageSettings.scrollableArea`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [pageSettings]="pageSettings" >
 </ej-diagram>
Script
public pageSettings;
constructor() {
    this.pageSettings = {
    scrollableArea: { x:0, y:0, width:1000, height:1000}
    };
}
Property:`scrollSettings.scrollableArea`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [scrollSettings]="scrollSettings">
</ejs-diagram>
Script
public scrollSettings: ScrollSettingsModel = {
        scrollableArea: new Rect(0, 0, 300, 300),
    }

Defines the draggable region of diagram elements Property:`pageSettings.boundaryConstraints`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [pageSettings]="pageSettings" >
 </ej-diagram>
Script
public pageSettings;
constructor() {
    this.pageSettings = {
    boundaryConstraints: BoundaryConstraints.Diagram
    };
}
Property:`pageSettings.boundaryConstraints`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [pageSettings]="pageSettings">
</ejs-diagram>
Script
public pageSettings: PageSettingsModel = {
        width: 800, height: 600, boundaryConstraints: 'Diagram'
    }

SymbolPalette

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the size and preview size of the node to add that to symbol palette Property:`nodes.paletteItem`

HTML
 <ej-symbolpalette id="symbolpalette" [palettes]="palettes" width="400px" height="700px"  >
</ej-symbolpalette>
Script
public palettes= [{
    name: "Basic Shapes",
    expanded: true,
    items: [{
        name: "Rectangle",
        height: 40,
        width: 80,
        paletteItem: {
            previewWidth: 100,
            previewHeight: 100
        }
    }]
}]
Property:`palettes`

HTML
 <ejs-symbolpalette id="symbolpalette" [expandMode]=true [palettes]='palettes' width="100%" height="100%" [symbolHeight]=60 [symbolWidth]=60
 [symbolMargin]='symbolMargin'  [getSymbolInfo]='getSymbolInfo'>
 </ejs-symbolpalette>
Script
private FlowShapes: NodeModel[] = [{
    id: 'Terminator',
    shape: {
        type: 'Flow',
        shape: 'Terminator'
    },
    style: {
        strokeWidth: 2
    }
},
{
    id: 'Process',
    shape: {
        type: 'Flow',
        shape: 'Process'
    },
    style: {
        strokeWidth: 2
    }
},
{
    id: 'Decision',
    shape: {
        type: 'Flow',
        shape: 'Decision'
    },
    style: {
        strokeWidth: 2
    }
},
]

public palettes:PaletteModel[] = [{
    id: 'flow',
    expanded: true,
    symbols: this.FlowShapes,
    title: 'Flow Shapes'
},]

public symbolMargin= {
    left: 12,
    right: 12,
    top: 12,
    bottom: 12
}

public  getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
    return {
        fit: true
    };
}

Defines whether the symbol should be drawn at its actual size regardless of precedence factors or not Property:`nodes.paletteItem.enableScale`

HTML
 <ej-symbolpalette id="symbolpalette" [palettes]="palettes" width="400px" height="700px"  >
</ej-symbolpalette>
Script
public palettes= [{
    name: "Basic Shapes",
    expanded: true,
    items: [{
        name: "Rectangle",
        height: 40,
        width: 80,
        paletteItem: {
            previewWidth: 100,
            previewHeight: 100,
            enableScale:false
        }
    }]
}]
Property:`palettes.fit`

HTML
 <ejs-symbolpalette id="symbolpalette" [expandMode]=true [palettes]='palettes' width="100%" height="100%" [symbolHeight]=60 [symbolWidth]=60
 [symbolMargin]='symbolMargin'>
 </ejs-symbolpalette>
Script
private FlowShapes: NodeModel[] = [{
    id: 'Terminator',
    shape: {
        type: 'Flow',
        shape: 'Terminator'
    },
    style: {
        strokeWidth: 2
    }
},
{
    id: 'Process',
    shape: {
        type: 'Flow',
        shape: 'Process'
    },
    style: {
        strokeWidth: 2
    }
},
{
    id: 'Decision',
    shape: {
        type: 'Flow',
        shape: 'Decision'
    },
    style: {
        strokeWidth: 2
    }
},
]

public palettes:PaletteModel[] = [{
    id: 'flow',
    expanded: true,
    symbols: this.FlowShapes,
    title: 'Flow Shapes'
},]

public symbolMargin= {
    left: 12,
    right: 12,
    top: 12,
    bottom: 12
}

To display a name for nodes in the symbol palette Property:`nodes.paletteItem.label`

HTML
 <ej-symbolpalette id="symbolpalette" [palettes]="palettes" width="400px" height="700px"  >
</ej-symbolpalette>
Script
public palettes = [{
    name: "Basic Shapes",
    expanded: true,
    items: [{
        name: "Rectangle",
        height: 40,
        width: 80,
        paletteItem: {
            previewWidth: 100,
            previewHeight: 100,
            label: "label",
            margin: { left: 4, right: 4, top: 4, bottom: 4 }
        }
    }]
}]
Property:`palettes.title`

HTML
 <ejs-symbolpalette id="symbolpalette" [expandMode]=true [palettes]='palettes' width="100%" height="100%" [symbolHeight]=60 [symbolWidth]=60
 [symbolMargin]='symbolMargin'  [getSymbolInfo]='getSymbolInfo'>
 </ejs-symbolpalette>
Script
private FlowShapes: NodeModel[] = [{
    id: 'Terminator',
    shape: {
        type: 'Flow',
        shape: 'Terminator'
    },
    style: {
        strokeWidth: 2
    }
},
{
    id: 'Process',
    shape: {
        type: 'Flow',
        shape: 'Process'
    },
    style: {
        strokeWidth: 2
    }
},
{
    id: 'Decision',
    shape: {
        type: 'Flow',
        shape: 'Decision'
    },
    style: {
        strokeWidth: 2
    }
},
]

public palettes:PaletteModel[] = [{
    id: 'flow',
    expanded: true,
    symbols: this.FlowShapes,
    title: 'Flow Shapes'
},]

public symbolMargin= {
    left: 12,
    right: 12,
    top: 12,
    bottom: 12
}

public  getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
    return {
        fit: true
    };
}

SelectedItems

Behaviour API in Essential JS 1 API in Essential JS 2
A read only collection of the selected items Property:`selectedItems.children`

@ViewChild('diagram') diagram: EJComponents<any, any>;

//Read the selected items
for(let i =0; i< this.diagram.widget.model.selectedItems.children; i++){
    //Do your actions here
}
Not applicable
Controls the visibility of selector Property:`selectedItems.constraints`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
 </ej-diagram>
Script
public selectedItems;
constructor() {
    this.selectedItems = { constraints: SelectorConstraints.UserHandles }
}
Property:`selectedItems.constraints`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [selectedItems]="selectedItems">
</ejs-diagram>
Script
public selectedItems = { constraints: SelectorConstraints.UserHandle }

Defines a method that dynamically enables/ disables the interaction with multiple selection Property:`selectedItems.getConstraints`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
 </ej-diagram>
Script
public selectedItems;
constructor() {
    this.selectedItems =  {
getConstraints: function() {
    return NodeConstraints.Drag |
    NodeConstraints.Resize
    }
}
Not applicable
Sets the height of the selected items Property:`selectedItems.height`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
 </ej-diagram>
Script
public selectedItems;
constructor() {
    this.selectedItems =  {
    height:100, width: 100,
    offsetX:100, offsetY: 100,
    rotateAngle: 90,
  }
}
Property:`selectedItems.height`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [selectedItems]="selectedItems">
</ejs-diagram>
Script
public selectedItems = {
        height:100, width: 100,
        offsetX:100, offsetY: 100,
        rotateAngle: 90 },
}

Sets the angle to rotate the selected items Property:`selectedItems.tooltip`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
 </ej-diagram>
Script
public selectedItems;
constructor() {
    this.selectedItems = {
    tooltip : { alignment:{ vertical:"top" } }
  }
}
Not applicable
A collection of frequently used commands that will be added around the selector Property:`selectedItems.userHandles`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
 </ej-diagram>
Script
public selectedItems;
constructor() {
    this.selectedItems = {
    userHandles:userHandle
    }
}
Property:`selectedItems.userHandles`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [selectedItems]="selectedItems">
</ejs-diagram>
Script
public handle: UserHandleModel[] = [{
    name: 'handle1', pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z'
    , visible: true, backgroundColor: 'black', offset: 0, side: 'Bottom', margin: { top: 0, bottom: 0, left: 0, right: 0 },
    pathColor: 'white'
}];
public selectedItems = {
        constraints: SelectorConstraints.UserHandle,
        userHandles: this.handle
        }

Sets the horizontal alignment of the user handle Property:`selectedItems.userHandles.horizontalAlignment`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
 </ej-diagram>
Script
    public selectedItems;
    constructor() {
        let userHandle = [];
    let cloneHandle = UserHandle();
    cloneHandle = {name : "cloneHandle",

    pathData : "M 4.6350084,4.8909971 L 4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M 3.0000062,2.8189973 L 11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M 0,0 L 7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z",

    visible : "true",

    backgroundColor : "#4D4D4D",

    offset : point(0, 0),

    position :" middleleft",

    margin : { left: 5 },

    pathColor : "white",

    horizontalAlignment : HorizontalAlignment.Right,
    verticalAlignment : VerticalAlignment.Top,

    borderColor : "red",
    borderWidth : 3,

    size : 20};

    userHandle.push(cloneHandle);
    this.selectedItems ={
        userHandles:userHandle
        }
    }
Property:`selectedItems.userHandles`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [selectedItems]="selectedItems">
</ejs-diagram>
Script
public handle: UserHandleModel[] = [{
    name: 'handle1',
    pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z',
    visible: true,
    backgroundColor: 'black',
    offset: 0,
    side: 'Bottom',
    margin: { top: 0, bottom: 0, left: 0, right: 0 },
    pathColor: 'white',
    horizontalAlignment: 'Center',
    verticalAlignment: 'Center',
    borderColor: 'red',
    borderWidth: 3,
    size: 30
}];
public selectedItems =  {
        constraints: SelectorConstraints.UserHandle,
        userHandles: this.handle
        }

Defines the interactive behaviors of the user handle Property:`selectedItems.userHandles.tool`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
 </ej-diagram>
Script
    public selectedItems;
    constructor() {
let CloneTool = (function(base) {
    extend(CloneTool, base);

    function CloneTool(name) {
        base.call(this, name);
        this.singleAction = true;
        this.clonedNodes = [];
        this.cursor = "pointer";
    }
    CloneTool.prototype.mouseup = function(evt) {
        this.diagram.copy();
        this.diagram.paste();
    }
}
return CloneTool;
});
(ToolBase);
let userHandle = [];
let cloneHandle = UserHandle();
cloneHandle.name = "cloneHandle";

cloneHandle.pathData = "M 4.6350084,4.8909971 L 4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M 3.0000062,2.8189973 L 11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M 0,0 L 7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z";

cloneHandle.tool =  new CloneTool(cloneHandle.name);;

userHandle.push(cloneHandle);
    this.selectedItems = {
        userHandles: userHandle
        }
    }
Not applicable
Defines whether the user handle should be added, when more than one element is selected Property:`selectedItems.userHandles.enableMultiSelection`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
 </ej-diagram>
Script
    public selectedItems;
    constructor() {
        let userHandle = [];
let cloneHandle = UserHandle();
cloneHandle.name = "cloneHandle";
cloneHandle.enableMultiSelection = true;

userHandle.push(cloneHandle);
this.selectedItems = {
        userHandles: userHandle
        }
    }
Not applicable
Sets the horizontal alignment of the user handle Not applicable Property:`selectedItems.userHandles.displacement`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [selectedItems]="selectedItems">
</ejs-diagram>
Script
public handle: UserHandleModel[] =  [{
    name: 'handle1',
    pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z',
    displacement: 30
}];
public selectedItems =  {
        constraints: SelectorConstraints.UserHandle,
        userHandles: this.handle
        }

SerializationSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Defines whether the default diagram properties can be serialized or not Property:`serializationSettings.preventDefaultValues`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [serializationSettings]="serializationSettings" >
 </ej-diagram>
Script
public serializationSettings;
constructor() {
    this.serializationSettings =  { serializationSettings:{ preventDefaultValues: true } };
}
Not applicable

Tooltip

Behaviour API in Essential JS 1 API in Essential JS 2
An object that defines the description, appearance and alignments of tooltip Property:`tooltip`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
 </ej-diagram>
 <script type="text/x-jsrender" id="mouseovertooltip">
 <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
    <span style="padding: 5px;">  </span>
</div>
</script>
Script
public nodes=[{
        name: "elizabeth",
        width: 70,
        height: 40,
        offsetX: 100,
        offsetY: 100,
        Designation: "Managing Director"
    }]
    public tooltip= {
        templateId: "mouseovertooltip",
        relativeMode: RelativeMode.Mouse,
    }
Property:`tooltip`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
    public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
    public tooltip = {
        content: 'Diagram',
        position: 'TopLeft',
        relativeMode: 'Object',
        animation: {
            open: { effect: 'FadeZoomIn', delay: 0 },
            close: { effect: 'FadeZoomOut', delay: 0 }
        }
    }

Defines the alignment of tooltip Property:`tooltip.alignment`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
 </ej-diagram>
 <script type="text/x-jsrender" id="mouseovertooltip">
 <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
    <span style="padding: 5px;">  </span>
</div>
</script>
Script
public nodes=[{
        name: "elizabeth",
        width: 70,
        height: 40,
        offsetX: 100,
        offsetY: 100,
        Designation: "Managing Director"
    }]
    public tooltip= {
        templateId: "mouseovertooltip",
        alignment: {
            horizontal: "center",
            vertical: "bottom"
        },
        relativeMode: RelativeMode.Mouse,
    }
Not applicable
Sets the margin of the tooltip Property:`tooltip.margin`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
 </ej-diagram>
 <script type="text/x-jsrender" id="mouseovertooltip">
 <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
    <span style="padding: 5px;">  </span>
</div>
</script>
Script
public nodes=[{
        name: "elizabeth",
        width: 70,
        height: 40,
        offsetX: 100,
        offsetY: 100,
        Designation: "Managing Director"
    }]
    public tooltip=  {
        templateId: "mouseovertooltip",
        alignment: {
            horizontal: "center",
            vertical: "bottom"
        },
        relativeMode: RelativeMode.Mouse,
        margin : { left: 5, right: 5, top: 5, bottom: 5 }
    }
Not applicable
Sets the svg/html template to be bound with tooltip Property:`tooltip.templateId`

HTML
 <ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
 </ej-diagram>
 <script type="text/x-jsrender" id="mouseovertooltip">
 <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
    <span style="padding: 5px;">  </span>
</div>
</script>
Script
public nodes=[{
        name: "elizabeth",
        width: 70,
        height: 40,
        offsetX: 100,
        offsetY: 100,
        Designation: "Managing Director"
    }]
    public tooltip= {
        templateId: "mouseovertooltip",
        alignment: {
            horizontal: "center",
            vertical: "bottom"
    }
Property:`tooltip.content`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
    public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
    public tooltip = {
        content: 'Diagram',
        relativeMode: 'Object',
        }
    }

Defines if the Tooltip has tip pointer or not Not applicable Property:`tooltip.showTipPointer`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
    public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
    public tooltip = {
        content: 'Diagram',
        position: 'TopLeft',
        relativeMode: 'Object',
        showTipPointer: true,
        }
    }

Defines the position of the Tooltip Not applicable Property:`tooltip.position`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
    public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
    public tooltip = {
        content: 'Diagram',
        position: 'TopLeft',
        relativeMode: 'Object',
        }
    }

Allows to set the same or different animation option for the Tooltip, when it is opened or closed Not applicable Property:`tooltip.animation`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
    public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
    public tooltip = {
        content: 'Diagram',
        position: 'TopLeft',
        relativeMode: 'Object',
        animation: {
            open: { effect: 'FadeZoomIn', delay: 0 },
            close: { effect: 'FadeZoomOut', delay: 0 }
            }
        }
    }

Sets the width of the tooltip Not applicable Property:`tooltip.width`

HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
    public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
    public tooltip = {
        width: 100,
        content: 'Diagram',
        position: 'TopLeft',
        relativeMode: 'Object',
        animation: {
            open: { effect: 'FadeZoomIn', delay: 0 },
            close: { effect: 'FadeZoomOut', delay: 0 }
            }
        }
    }

Sets the height of the Tooltip Not applicable Property:`tooltip.height`

HTML

<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
    public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
    public tooltip = {
        height: 100,
        content: 'Diagram',
        position: 'TopLeft',
        relativeMode: 'Object',
        animation: {
            open: { effect: 'FadeZoomIn', delay: 0 },
            close: { effect: 'FadeZoomOut', delay: 0 }
            }
        }
    }