Expand icon and collapse icon in Angular Diagram control

10 Dec 202417 minutes to read

Diagram provides support to describe the state of the node. i.e., the node is expanded or collapsed state. The IsExpanded property of node is used to expand or collapse the children nodes.The Expand and Collapse support is used to compress the hierarchy view so that only the roots of each elements are visible.

The following properties of the Node are used to represent the state of the node and allows user to Expand and Collapse the desired Node:

• ExpandIcon

• CollapseIcon

NOTE

Icon can be created only when the node has outEdges.

To explore the properties of expand and collapse icon, refer to expandIcon and collapseIcon.

Customizing expand and collapse icon

Size and shape

Set a size for an icon by using width and height properties.

The expandIcon’s and collapseIcon’s shape property allows to define the shape of the icon.

The following code example illustrates how to create an icon of various shapes.

app.component.ts

import {
  DiagramModule,
  HierarchicalTreeService,
  DataBindingService,
  LayoutAnimationService,
  DiagramComponent,
  Diagram,
  NodeModel,
  ConnectorModel,
  SelectorModel,
  SelectorConstraints,
  SnapSettingsModel,
  LayoutModel,
  DataSourceModel,
  DecoratorModel,
  ShapeStyleModel,
  TreeInfo,
} from '@syncfusion/ej2-angular-diagrams';
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DataManager, Query } from '@syncfusion/ej2-data';

@Component({
  imports: [DiagramModule],

  providers: [
    HierarchicalTreeService,
    DataBindingService,
    LayoutAnimationService,
  ],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults]="getNodeDefaults" [getConnectorDefaults]="getConnectorDefaults" [snapSettings]="snapSettings" [selectedItems]="selectedItems" [layout]="layout" [dataSourceSettings]="dataSourceSettings">
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public selectedItems?: SelectorModel;
  public snapSettings?: SnapSettingsModel;
  public items?: DataManager;
  public layout?: LayoutModel;
  public dataSourceSettings?: DataSourceModel;
  //Initializes data source
  public data: object[] = [
    {
      Id: 'parent1',
      Name: 'Maria ',
      Designation: 'Managing Director',
      RatingColor: '#C34444',
    },
    {
      Id: 'parent',
      Name: ' sam',
      Designation: 'Managing Director',
      ReportingPerson: 'parent1',
      RatingColor: '#C34444',
    },
  ];
  //Sets the default properties for all the Nodes
  public getNodeDefaults(obj: NodeModel | any, diagram: Diagram): NodeModel {
    (obj.height = 40),
      (obj.width = 100),
      (obj.expandIcon = {
        height: 15,
        width: 15,
        shape: 'Minus',
        fill: 'lightgray',
        offset: {
          x: 0.5,
          y: 0.85,
        },
      });
    obj.collapseIcon.offset = {
      x: 0.5,
      y: 0.85,
    };
    obj.collapseIcon.height = 15;
    obj.collapseIcon.width = 15;
    obj.collapseIcon.shape = 'Plus';
    obj.borderColor = 'white';
    obj.backgroundColor = '#6BA5D7';
    obj.borderWidth = 1;
    obj.style = {
      fill: 'transparent',
      strokeWidth: 2,
    };
    return obj;
  }
  //Sets the default properties for all the connectors
  public getConnectorDefaults(
    connector: ConnectorModel,
    diagram: Diagram
  ): ConnectorModel {
    connector.style = {
      strokeColor: '#6BA5D7',
      strokeWidth: 2,
    };
    (
      ((connector as ConnectorModel).targetDecorator as DecoratorModel)
        .style as ShapeStyleModel
    ).fill = '#6BA5D7';
    (
      ((connector as ConnectorModel).targetDecorator as DecoratorModel)
        .style as ShapeStyleModel
    ).strokeColor = '#6BA5D7';
    ((connector as ConnectorModel).targetDecorator as DecoratorModel).shape =
      'None';
    connector.type = 'Orthogonal';
    return connector;
  }
  ngOnInit(): void {
    this.selectedItems = {
      constraints: ~SelectorConstraints.ResizeAll,
    };
    this.snapSettings = {
      constraints: 0,
    };
    this.items = new DataManager(this.data as JSON[], new Query().take(7));
    //Uses layout to auto-arrange nodes on the Diagram page
    this.layout = {
      // set enableAnimation as true
      enableAnimation: true,
      type: 'HierarchicalTree',
      margin: {
        top: 20,
      }, // define the getLayoutInfo
      getLayoutInfo: (node: Node, tree: TreeInfo | any) => {
        if (!tree.hasSubTree) {
          tree.orientation = 'vertical';
          tree.type = 'alternate';
        }
      },
    };
    //Configures data source for Diagram
    this.dataSourceSettings = {
      id: 'Id',
      parentId: 'ReportingPerson',
      dataSource: this.items,
    };
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Set the borderColor, borderWidth, and background color for an icon using borderColor, borderWidth, and fill properties.

The corner radius can be set using the cornerRadius property of the icon.

The icon can be aligned relative to the node boundaries. It has margin, offset, horizontalAlignment, and verticalAlignment settings. It is quite tricky, when all four alignments are used together but gives you more control over alignment.

The iconColor property can be used to set the strokeColor of the Icon.

The following code example illustrates the customization of icons.

app.component.ts

import {
  DiagramModule,
  HierarchicalTreeService,
  DataBindingService,
  LayoutAnimationService,
  DiagramComponent,
  Diagram,
  NodeModel,
  ConnectorModel,
  SelectorModel,
  SelectorConstraints,
  SnapSettingsModel,
  LayoutModel,
  DataSourceModel,
  DecoratorModel,
  ShapeStyleModel,
  TreeInfo,
} from '@syncfusion/ej2-angular-diagrams';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DataManager, Query } from '@syncfusion/ej2-data';

@Component({
  imports: [DiagramModule],

  providers: [
    HierarchicalTreeService,
    DataBindingService,
    LayoutAnimationService,
  ],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults]="getNodeDefaults" [getConnectorDefaults]="getConnectorDefaults" [snapSettings]="snapSettings" [selectedItems]="selectedItems" [layout]="layout" [dataSourceSettings]="dataSourceSettings">
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public selectedItems?: SelectorModel;
  public snapSettings?: SnapSettingsModel;
  public items?: DataManager;
  public layout?: LayoutModel;
  public dataSourceSettings?: DataSourceModel;
  //Initializes data source
  public data: object[] = [
    {
      Id: 'parent1',
      Name: 'Maria ',
      Designation: 'Managing Director',
      RatingColor: '#C34444',
    },
    {
      Id: 'parent',
      Name: ' sam',
      Designation: 'Managing Director',
      ReportingPerson: 'parent1',
      RatingColor: '#C34444',
    },
  ];
  //Sets the default properties for all the Nodes
  public getNodeDefaults(obj: NodeModel | any, diagram: Diagram): NodeModel {
    (obj.height = 40),
      (obj.width = 100),
      (obj.expandIcon = {
        shape: 'ArrowUp',
        width: 20,
        height: 20,
        fill: 'red',
        borderColor: 'blue',
        iconColor: 'white',
        cornerRadius: 7,
        borderWidth: 2.5,
        offset: {
          x: 0.5,
          y: 0.85,
        },
      });
    obj.collapseIcon = {
      offset: {
        x: 0.5,
        y: 0.85,
      },
      shape: 'ArrowDown',
      width: 20,
      height: 20,
      fill: 'green',
      borderColor: 'blue',
      iconColor: 'white',
      cornerRadius: 7,
      borderWidth: 2.5,
    };
    obj.collapseIcon.height = 15;
    obj.collapseIcon.width = 15;
    obj.borderColor = 'white';
    obj.backgroundColor = '#6BA5D7';
    obj.borderWidth = 1;
    obj.style = {
      fill: 'transparent',
      strokeWidth: 2,
    };
    return obj;
  }
  //Sets the default properties for all the connectors
  public getConnectorDefaults(
    connector: ConnectorModel,
    diagram: Diagram
  ): ConnectorModel {
    connector.style = {
      strokeColor: '#6BA5D7',
      strokeWidth: 2,
    };
    (
      ((connector as ConnectorModel).targetDecorator as DecoratorModel)
        .style as ShapeStyleModel
    ).fill = '#6BA5D7';
    (
      ((connector as ConnectorModel).targetDecorator as DecoratorModel)
        .style as ShapeStyleModel
    ).strokeColor = '#6BA5D7';
    ((connector as ConnectorModel).targetDecorator as DecoratorModel).shape =
      'None';
    connector.type = 'Orthogonal';
    return connector;
  }
  ngOnInit(): void {
    this.selectedItems = {
      constraints: ~SelectorConstraints.ResizeAll,
    };
    this.snapSettings = {
      constraints: 0,
    };
    this.items = new DataManager(this.data as JSON[], new Query().take(7));
    //Uses layout to auto-arrange nodes on the Diagram page
    this.layout = {
      // set enableAnimation as true
      enableAnimation: true,
      type: 'HierarchicalTree',
      margin: {
        top: 20,
      }, // define the getLayoutInfo
      getLayoutInfo: (node: Node, tree: TreeInfo | any) => {
        if (!tree.hasSubTree) {
          tree.orientation = 'vertical';
          tree.type = 'alternate';
        }
      },
    };
    //Configures data source for Diagram
    this.dataSourceSettings = {
      id: 'Id',
      parentId: 'ReportingPerson',
      dataSource: this.items,
    };
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

IsExpanded

isExpanded property is used to defines whether the node is expanded or not. The following example demonstrate node’s isExpanded property. The default value of isExpanded property is true.

export class AppComponent {
    @ViewChild("diagram")
    public diagram: DiagramComponent;
    public nodes: NodeModel[] = [
    {
      id: 'Start', width: 140, height: 50, offsetX: 300, offsetY: 50,
      //Expand state of node
      isExpanded:false
      expandIcon: {shape: 'ArrowDown',   width: 20,
      height: 15},
      collapseIcon: {shape: 'ArrowUp',  width: 20,
      height: 15}
    },
  ];
}