Layout events in Angular Diagram control

28 Mar 202511 minutes to read

DataLoaded event

The dataLoaded event is triggered after the diagram is populated from the external data source.

The following code example explains the data loaded event in the diagram.

<ejs-diagram #diagram id="diagram" width="100%" height="600px" [nodes]="nodes" [connectors]="connectors"
  [layout]="layout" (dataLoaded)="dataLoaded($event)" > </ejs-diagram>

export class AppComponent {
  @ViewChild("diagram")
  public diagram!: DiagramComponent;

  public dataLoaded(args: IDataLoadedEventArgs) {
      //we can get diagram instance in args.
      console.log(args);

      //customize
  }
}

ExpandStateChange event

The expandStateChange will be triggered when the state of the expand and collapse icon change for a node.

The following code example explains the expandStateChange event in the diagram.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, ConnectorModel, LayoutModel, HierarchicalTree, DiagramModule,
  HierarchicalTreeService, IExpandStateChangeEventArgs } from '@syncfusion/ej2-angular-diagrams';

Diagram.Inject(HierarchicalTree);

@Component({
  imports: [DiagramModule],

  providers: [HierarchicalTreeService],
  standalone: true,
  selector: "app-container",
  template: `
  <ejs-diagram #diagram id="diagram" width="100%" height="550px" [nodes]="nodes" [connectors]="connectors"
  [layout]="layout" (expandStateChange)="expandStateChange($event)" > </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  @ViewChild("diagram")
  public diagram!: DiagramComponent;
  public layout: LayoutModel = {};

  //Initialize nodes 
  public nodes: NodeModel[] = [
    {
      id: 'Start',
      width: 140,
      height: 50,
      offsetX: 300,
      offsetY: 50,
      annotations: [{ content: 'Node1' }],
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      expandIcon: {
        shape: 'ArrowDown',
        width: 20,
        height: 15,
      },
      collapseIcon: {
        shape: 'ArrowUp',
        width: 20,
        height: 15,
      },
    },
    {
      id: 'Init',
      width: 140,
      height: 50,
      offsetX: 300,
      offsetY: 140,
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      annotations: [{ content: 'Node2' }],
    },
  ];

  //Initialize connectors
  public connectors: ConnectorModel[] = [{
    // Unique name for the connector
    id: 'connector1',
    sourceID: 'Start',
    targetID: 'Init',
    type: 'Orthogonal',
  }];

  // Handle expand/collapse state changes
  public expandStateChange(args: IExpandStateChangeEventArgs) {
    //We can get the expanded or collapsed state in args
    console.log('Expanded ' + args.state);
  }

  ngOnInit(): void {
    //Uses layout to auto-arrange nodes on the Diagram page
    this.layout = {
      //Sets layout type
      type: 'HierarchicalTree',
    }
  }

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

Animation complete event

The animationComplete event is triggered after the animation of the diagram elements is completed. The following example demonstrates how to handle the animation complete event and customize based on the expand state of the root node.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, ConnectorModel, LayoutModel, HierarchicalTree, DiagramModule,
  HierarchicalTreeService, LayoutAnimation, LayoutAnimationService, ShapeStyleModel } from '@syncfusion/ej2-angular-diagrams';

Diagram.Inject(HierarchicalTree, LayoutAnimation);

@Component({
  imports: [DiagramModule],

  providers: [HierarchicalTreeService, LayoutAnimationService],
  standalone: true,
  selector: "app-container",
  template: `
  <ejs-diagram #diagram id="diagram" width="100%" height="600px" [nodes]="nodes" [connectors]="connectors"
  [layout]="layout" (animationComplete)="animationComplete()" > </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  @ViewChild("diagram")
  public diagram!: DiagramComponent;
  public layout: LayoutModel = {};

  //Initialize nodes
  public nodes: NodeModel[] = [
    {
      id: 'Start',
      width: 140,
      height: 50,
      offsetX: 300,
      offsetY: 50,
      annotations: [{ content: 'Node1' }],
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      expandIcon: {
        shape: 'ArrowDown',
        width: 20,
        height: 15,
      },
      collapseIcon: {
        shape: 'ArrowUp',
        width: 20,
        height: 15,
      },
    },
    {
      id: 'Init',
      width: 140,
      height: 50,
      offsetX: 300,
      offsetY: 140,
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      annotations: [{ content: 'Node2' }],
    },
    {
      id: 'Init2',
      width: 140,
      height: 50,
      offsetX: 100,
      offsetY: 140,
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      annotations: [{ content: 'Node3' }],
    },
    {
      id: 'Init3',
      width: 140,
      height: 50,
      offsetX: 150,
      offsetY: 140,
      style: { fill: '#6BA5D7', strokeColor: 'white' },
      annotations: [{ content: 'Node4' }],
    },
  ];

  //Initialize connectors
  public connectors: ConnectorModel[] = [
    {
      id: 'connector1',
      sourceID: 'Start',
      targetID: 'Init',
      type: 'Orthogonal',
    },
    {
      id: 'connector2',
      sourceID: 'Start',
      targetID: 'Init2',
      type: 'Orthogonal',
    },
    {
      id: 'connector3',
      sourceID: 'Init2',
      targetID: 'Init3',
      type: 'Orthogonal',
    },
  ];

  // Handle animation state changes
  public animationComplete() {

    console.log('Animation complete');
    (this.diagram.nodes[0].style as ShapeStyleModel).fill =
      (this.diagram.nodes[0].style as ShapeStyleModel).fill === '#6BA5D7' ? 'red' : '#6BA5D7';
    this.diagram.dataBind();

    //customize
  }

  ngOnInit(): void {
    //Uses layout to auto-arrange nodes on the Diagram page
    this.layout = {
      //Sets layout type
      type: 'HierarchicalTree',
    }
  }

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

Layout updated event

The layoutUpdated event is triggered when the layout rendering process in the diagram either starts or completes. This event allows users to track the state of the layout rendering process.

The following code example explains the layout updated event in the diagram.

<ejs-diagram #diagram id="diagram" width="100%" height="550px" [nodes]="nodes" [connectors]="connectors"
  [layout]="layout" (layoutUpdated)="layoutUpdated($event)" > </ejs-diagram>

export class AppComponent {
  @ViewChild("diagram")
  public diagram!: DiagramComponent;
  // Handle layout updated event
  public layoutUpdated(args: ILayoutUpdatedEventArgs) {
      if (args.state == 'Started') {
        console.log('layout started rendering');
      }
  }
}