We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 11 Diagram

Platform: Angular - EJ 2 |
Control: Diagram

 A quick start project that helps you to create an Angular 11 Diagram with minimal code configuration.

Diagram features covered in this project

 

This is an Angular 11 project created using Angular CLI 11.2.3. The Diagram features included in this project are as follows:

  1. Simple flowchart
  • Diagram provides all required flow shapes as readymade objects. You need to define the shapes and type to render the desired shapes in the diagram.
  • Avoids overlapping of connectors over nodes using ports.
  1. Organizational chart
  • This sample explains how to assign the data Source externally and automatically position the populated nodes.
Project prerequisites

 

Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project.

Angular 11 Diagram – Introduction

 

The Angular 11 Diagram used in this project is created from the Syncfusion `ej2-angular-diagram` package. You can simply define it as <ejs-diagram> within the template.

Dependencies

 

Before starting with this project, the Angular 11 Diagram requires to add the Syncfusion `ej2-diagram` package from npmjs, which are distributed in npm as @syncfusion scoped packages.

Creating Angular Project

 

You can refer to the Angular project creation steps using the Angular CLI tool.

  1. Install the Angular CLI application in your machine.

 

npm install @angular/cli@11.2.3

 

Note:

If you would like to follow and run the application in Angular 6Angular 5, or Angular 4,  replace the CLI command version number with corresponding Angular version number.

npm install -g @angular/cli@<CLI VERSION>

 

 

  1. Now, create a new Angular project by using the command `ng new` and navigate to that folder.

 

ng new angular11-app

cd angular-app

 

  1. Install the ej2-angular-diagram package using the npm install command.

 

npm install @syncfusion/ej2-angular-diagrams --save

 

Creating Empty diagram

 

You can add the Angular 11 diagram component by using `ej-diagram` directive and the attributes used within this tag allows you to define other diagram functionalities.

  1. You have to import the DiagramModule into app.module.ts file from the package @syncfusion/ej2-angular-diagrams

 

[src/app/app.module.ts]

 

import { BrowserModule } from '@angular/platform-browser';

import { DiagramModule } from '@syncfusion/ej2-angular-diagrams';

import { NgModule } from '@angular/core';

 

import { AppComponent } from './app.component';

 

/**

 * Module

 */

@NgModule({

  imports: [

      BrowserModule, DiagramModule

  ],

  declarations: [AppComponent],

  bootstrap: [AppComponent],

  providers: [ ],

})

 

export class AppModule { }

 

 

  1. Define the diagram tag into app.component.html. In the following code example, set the ID, width, and height property of the diagram to create an empty diagram.

 

[src/app/app.component.html]

 

<ejs-diagram id="diagram" width="100%" height="580px"> </ejs-diagram>

 

  1. Then, you must include the diagram dependent stylesheets into [src/styles.css] file. Syncfusion provides different types of themes style to the Diagram control and you can use this into your application based on your requirement. All the stylesheets are available under node_modules/@syncfusion/ej2-angular-diagrams folder. 

 

@import "../node_modules/@syncfusion/ej2-angular-diagrams/material.css";

 

  1. Now, run the application by using ng serve command and open this link in your browser. You will see the empty diagram as follows.

 

Diagram_app

 

Creating flowchart with Syncfusion Diagram control

 

Using Syncfusion Diagram control, you can create a flowchart with nodes and connectors like the following screenshot.

Flowchart

 

  • Nodes are used to visualize any graphical object and it can be arranged and manipulated at the same time on a diagram page.
  • Diagram provides all required flow shapes as readymade objects. You can just define the shape type and shape name to render the shapes in the diagram.

Here is a sample code for adding nodes.

[src/app/app.component.ts]

 

 public nodes: NodeModel[] = [

 { 

    //Define unique id for each shape

     id: 'Start', offsetY: 50, annotations: [{ content: 'Start' }], 

      //Define the shape type and flow shape

     shape: { type: 'Flow', shape: 'Terminator' } 

  },

  {

     id: 'Init', offsetY: 150, annotations: [{ content: 'var i = 0;' }],

      shape: { type: 'Flow', shape: 'Process' } 

   },

  {

      id: 'Condition', offsetY: 250, annotations: [{ content: 'i < 10?' }], shape: { type: 'Flow', shape: 'Decision' },

      

    },

    { id: 'Print', offsetY: 350, annotations: [{ content: 'print(\'Hello!!\');' }], shape: { type: 'Flow', shape: 'PreDefinedProcess' } },

    {

      id: 'Increment', offsetY: 450, annotations: [{ content: 'i++;' }], shape: { type: 'Flow', shape: 'Process' },

      

    },

    {

      id: 'End', offsetY: 550, annotations: [{ content: 'End' }], shape: { type: 'Flow', shape: 'Terminator' },

     

    },

];

 

  • Now, you have to map this “nodes” object to the diagram’s nodes property.

[src/app/app.component.html]

  <ejs-diagram id="diagram" width="100%" height="580px"  [nodes] = “nodes”>

</ejs-diagram>

 

 

  • Connectors are used to represent a relationship between two nodes. Here is a sample code for adding connectors.

[src/app/app.component.ts]

    public connectors: ConnectorModel[] = [

    { 

        //Define unique ID for connectors

       id: 'connector1',

       //SourceID and targetID property is used to define the relationship between shapes

       sourceID: 'Start', targetID: 'Init' 

     },

   {

      id: 'connector3', sourceID: 'Condition', targetID: 'Print',

      annotations: [{ content: 'Yes' }]

    },

    {

      id: 'connector4', sourceID: 'Condition', targetID: 'End',  

      annotations: [{ content: 'No' }]

    },

    { id: 'connector5', sourceID: 'Print', targetID: 'Increment' },

    {

      id: 'connector6', sourceID: 'Increment', targetID: 'Condition',  

    }

  ];

 

  • Now, you have to map this “connectors” object to the diagram’s connectors property.

[src/app/component.html]

  <ejs-diagram id="diagram" width="100%" height="580px" [nodes] = “nodes”  [connectors] = “connectors”>

</ejs-diagram>

 

 

  • From the above screenshot, you can see all the nodes have same width, height, and x position. So, instead of specifying these common settings to all the nodes, the “getNodeDefaults” property of the diagram is used to define these common settings to all the nodes.
  • Define the common settings in the “getNodeDefaults” method. And then, you must map the method name to the diagram’s “getNodeDefaults” property. 

[src/app/app.component.html]

  <ejs-diagram id="diagram" width="100%" height="580px" [nodes] = “nodes”  [connectors] = “connectors”  [getNodeDefaults] = “nodeDefaults”>

</ejs-diagram>

 

[src/app/app.component.ts]

  public nodeDefaults(obj: NodeModel) : NodeModel {

    let node: NodeModel = {};

    node.height = 50;

    node.width = 140;

    node.offsetX = 300;

    return node;

  }

  • Like “getNodeDefaults”, the “getConnectorDefaults” property is used to define the common settings for connector.
  • Three types of connectors are supported in the diagram such as straight line, orthogonal line, and Bezier line. Here, orthogonal connector is used to create the flow diagram.
  • The targetDecorator is used to indicate the flow direction.  You can also define sourceDecorator based on your requirement.
  • Now, you have to map the “getConnectorDefaults” object to the “getConnectorDefaults” property of the diagram.

[src/app/app.component.html]

  <ejs-diagram id="diagram" width="100%" height="580px" [nodes] = “nodes”  [connectors] = “connectors” [getNodeDefaults] = “nodeDefaults” [getConnectorDefaults] = “connDefaults”>

</ejs-diagram>

 

[src/app/app.component.ts]

  public connDefaults(obj: Connector) : void {

    obj.type = 'Orthogonal';

    obj.targetDecorator = { shape: 'Arrow', width: 10, height: 10 };

  }

 

Diagram_chart

 

  • In the above screenshot, there are some connectors overlapped with the node. It can be avoided with the help of ports.
  • Ports represent a specific point on a node to which connector can be connected. You can add multiple ports to the nodes.
  • The offset property of port is used to align the port relative to the node boundaries. The x and y properties of the offset should be defined in the range of 0 to 1.
  • For example, if you specify x = 0 and y = 0, then port will be positioned at top/left corner of the node. If you define (1, 1), then it will be positioned at bottom/right corner, and (0.5, 0.5) represents center of the node.
  • The ports are added for the nodes, which are overlapped with the connectors.
  • The connection has been established from port to port instead of node to node for “conditionNode” and “endNode” using the connector’s sourcePortID and targetPortID properties.
  • Similarly, the connection has been established from port to port instead of node to node for “incrementalNode” and “conditionNode”

Here is an example for avoiding overlapping of connectors.

   public nodes: NodeModel[] = [ 

    {

      id: 'Condition', offsetY: 250, annotations: [{ content: 'i < 10?' }], shape: { type: 'Flow', shape: 'Decision' },

   //Creation of ports

      ports: [{ offset: { x: 0, y: 0.5 }, id: "port1" }, { offset: { x: 1, y: 0.5 }, id: "port2" }]

    },

    {

      id: 'Increment', offsetY: 450, annotations: [{ content: 'i++;' }], shape: { type: 'Flow', shape: 'Process'    },

      ports: [{ offset: { x: 0, y: 0.5 }, id: "port1" }, { offset: { x: 1, y: 0.5 }, id: "port2" }]

    },

    {

      id: 'End', offsetY: 550, annotations: [{ content: 'End' }], shape: { type: 'Flow', shape: 'Terminator' },

      ports: [{ offset: { x: 0, y: 0.5 }, id: "port1" }, { offset: { x: 1, y: 0.5 }, id: "port2" }]

    },

  ]

 

  public connectors: ConnectorModel[] = [ 

//Establish port to port connection by specifying sourcePortID and targetPortID

    {

      id: 'connector4', sourceID: 'Condition', targetID: 'End', sourcePortID: 'port2', targetPortID: 'port2',

      annotations: [{ content: 'No' }]

    }, 

    {

      id: 'connector6', sourceID: 'Increment', targetID: 'Condition', sourcePortID: 'port1', targetPortID: 'port1'

    }

  ];

 

The following screenshot avoids overlapping of connectors by means of ports.

Diagram_overlap

 

Creating organizational chart with Syncfusion Diagram control

 

An organizational chart is a Diagram that displays the structure of an organization and relationships between the users (Employees). Using Syncfusion Diagram control, you can create an organization chart like the following screenshot.

Diagram-organizational

 

  • Define the employee information as JSON array and then configure the data into the diagram’s `dataSourceSettings` property.

·  In Syncfusion Diagram control, rectangle boxes shown in the screenshot represent nodes, lines represents connectors, and the text inside the rectangle box represents annotations.

·  At each node creation, the dataSourceSettings `doBinding` method will be triggered. You can use this method to configure the employee information inside the node.

·  From the screenshot, the rectangle boxes having same width and height and the lines having same line style. Use the “nodeDefaults” and “connectorDefaults” method available in the Diagram control to configure these common settings.

[src/app/app.component.ts]

     public Data: any = [

    { 'id': 'parent', 'role': 'Board', 'color': '#71AF17' },

    { 'id': '1', 'role': 'General Manager', 'manager': 'parent', 'color': '#71AF17' },

    { 'id': '2', 'role': 'Human Resource Manager', 'manager': '1', 'color': '#1859B7' },

    { 'id': '3', 'role': 'Trainers', 'manager': '2', 'color': '#2E95D8' },

    { 'id': '4', 'role': 'Recruiting Team', 'manager': '2', 'color': '#2E95D8' }, 

    { 'id': '6', 'role': 'Design Manager', 'manager': '1', 'color': '#1859B7' },

    { 'id': '7', 'role': 'Design Supervisor', 'manager': '6', 'color': '#2E95D8' },

    { 'id': '8', 'role': 'Development Supervisor', 'manager': '6', 'color': '#2E95D8' },

    { 'id': '10', 'role': 'Operations Manager', 'manager': '1', 'color': '#1859B7' },

    { 'id': '11', 'role': 'Statistics Department', 'manager': '10', 'color': '#2E95D8' },

    { 'id': '12', 'role': 'Logistics Department', 'manager': '10', 'color': '#2E95D8' },

    { 'id': '16', 'role': 'Marketing Manager', 'manager': '1', 'color': '#1859B7' },

    { 'id': '17', 'role': 'Overseas Sales Manager', 'manager': '16', 'color': '#2E95D8' }, 

    { 'id': '20', 'role': 'Service Department Manager', 'manager': '16', 'color': '#2E95D8' }

    ];

 

    public data: Object = {

         //Set the unique field from data source

        id: 'id', 

        //Set the field, which is used to identify the reporting person

        parentId: 'manager', 

        //Define the employee data

        dataManager: new DataManager(this.Data),

        doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {

            //You will get the employee information in data argument and bind that value directly to node's built-in properties.

            nodeModel.annotations = [{ content: (data as any).role }];

            nodeModel.style = { fill: (data as any).color };

        }

    };

    public layout: Object = {

         //Set the layout type

        type: 'OrganizationalChart' 

    };

 

    //Defines the default node and connector properties

    public nodeDefaults(obj: NodeModel) : NodeModel {

      obj.annotations[0].style.color = "white";

      obj.width = 120; 

      return obj;

    };

    public connDefaults(connector: ConnectorModel, diagram: Diagram) : ConnectorModel {

        connector.type = 'Orthogonal';

        connector.targetDecorator = { shape: 'None' };

        return connector;

    }

 

 

Now, you have to map the diagram’s layout, dataSourceSettings, node, and connector defaults property within the app.component.html file.

[src/app/app.component.html]

 

<ejs-diagram id="diagram" id="diagram" width="100%" height="700px " [layout]='layout' [dataSourceSettings]= 'data' [getNodeDefaults]= 'nodeDefaults' [getConnectorDefaults]= 'connDefaults' >

</ejs-diagram>

The following screenshot displays the organizational chart of the employees.

Employees-organizational-chart

 
Summary

 

To know more about the Diagram, check our Angular Diagram features from this page. If you have any queries or require clarifications.

Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!

 

2X faster development

The ultimate Angular UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile