Symbol Palette Events in Angular Diagram

17 Aug 202624 minutes to read

The Symbol Palette component provides several events that trigger during user interactions such as dragging symbols, expanding palettes, and changing selections. These events enable developers to customize behavior, provide visual feedback, and implement custom logic during symbol palette operations.

DragEnter event

The DragEnter event triggers when a symbol enters the diagram surface while being dragged from the symbol palette. This event allows developers to customize the appearance of the dragged symbol or validate drop targets dynamically based on the diagram’s current state.

The IDragEnterEventArgs provides the following properties:

Property Type Description
cancel boolean Indicates whether the symbol should be added to or removed from the diagram.
diagram DiagramModel The diagram instance.
dragData DropInfo The node or connector dragged into the diagram from another component.
dragItem NodeModel / ConnectorModel The node or connector returned to the diagram.
element NodeModel / ConnectorModel The node or connector being dragged into the diagram.
source Object The source object being dragged into the diagram. 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, IDragEnterEventArgs, SymbolPaletteModule, NodeModel, PaletteModel } from '@syncfusion/ej2-angular-diagrams'

@Component({
    imports: [
        DiagramModule, SymbolPaletteModule
    ],

    providers: [],
    standalone: true,
    selector: "app-container",
    template: `<ejs-symbolpalette id="symbolpalette" [palettes]="palettes" [symbolHeight]=50 [symbolWidth]=70>
    </ejs-symbolpalette>
    <ejs-diagram #diagram id="diagram" width="1000" height="500px" (dragEnter)="dragEnter($event)"></ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public palettes: PaletteModel[] = [
        {
            id: 'basic',
            symbols: this.getBasicShapes(),
            title: 'Basic Shapes',
        },
    ];
    getBasicShapes(): NodeModel[] {
        let nodes: NodeModel[] = [
            {
                id: 'rectangle',
                shape: {
                    type: 'Basic',
                    shape: 'Rectangle',
                },
            },
            {
                id: 'plus',
                shape: {
                    type: 'Basic',
                    shape: 'Plus',
                },
            },
            {
                id: 'triangle',
                shape: {
                    type: 'Basic',
                    shape: 'RightTriangle',
                },
            },
        ];
        return nodes;
    }

    dragEnter(args: IDragEnterEventArgs) {
        //Dragged symbol
        console.log(args.element.id);
        //customize
        (args as any).element.style.fill = 'yellow';
        (this.diagram as DiagramComponent).dataBind();
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

DragLeave event

The DragLeave event occurs when a dragged symbol leaves the diagram surface without being dropped. This event is particularly useful for cleaning up temporary visual changes applied during the drag operation or resetting any modified states.

The IDragLeaveEventArgs provides the following properties:

Property Type Description
diagram DiagramModel The diagram instance.
element SelectorModel The node or connector dragged outside the diagram. 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, SymbolPaletteModule, NodeModel, PaletteModel, IDragLeaveEventArgs } from '@syncfusion/ej2-angular-diagrams'

@Component({
    imports: [
        DiagramModule, SymbolPaletteModule
    ],

    providers: [],
    standalone: true,
    selector: "app-container",
    template: `<ejs-symbolpalette id="symbolpalette" [palettes]="palettes" [symbolHeight]=50 [symbolWidth]=70>
    </ejs-symbolpalette>
    <ejs-diagram #diagram id="diagram" width="1000" height="500px" (dragLeave)="dragLeave($event)"></ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public palettes: PaletteModel[] = [
        {
            id: 'basic',
            symbols: this.getBasicShapes(),
            title: 'Basic Shapes',
        },
    ];
    getBasicShapes(): NodeModel[] {
        let nodes: NodeModel[] = [
            {
                id: 'rectangle',
                shape: {
                    type: 'Basic',
                    shape: 'Rectangle',
                },
            },
            {
                id: 'plus',
                shape: {
                    type: 'Basic',
                    shape: 'Plus',
                },
            },
            {
                id: 'triangle',
                shape: {
                    type: 'Basic',
                    shape: 'RightTriangle',
                },
            },
        ];
        return nodes;
    }

    dragLeave(args: IDragLeaveEventArgs) {
        //drag leaved symbol
        console.log((args.element as any).id);
        //customize
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

DragOver event

The DragOver event triggers continuously while a symbol is being dragged over the diagram surface. This event provides real-time feedback during drag operations and enables developers to implement dynamic drop validation.

The IDragOverEventArgs provides the following properties:

Property Type Description
element NodeModel / ConnectorModel The element being dragged.
source Diagram The source diagram reference.
target Diagram The target diagram reference.
cancel boolean Whether to cancel the drag operation. 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, SymbolPaletteModule, NodeModel, PaletteModel, IDragOverEventArgs, NodeConstraints } from '@syncfusion/ej2-angular-diagrams'

@Component({
    imports: [
        DiagramModule, SymbolPaletteModule
    ],

    providers: [],
    standalone: true,
    selector: "app-container",
    template: `<ejs-symbolpalette id="symbolpalette" [palettes]="palettes" [symbolHeight]=50 [symbolWidth]=70>
    </ejs-symbolpalette>
    <ejs-diagram #diagram id="diagram" width="1000" height="500px" [getNodeDefaults]="getNodeDefaults" (dragOver)="dragOver($event)"></ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public palettes: PaletteModel[] = [
        {
            id: 'basic',
            symbols: this.getBasicShapes(),
            title: 'Basic Shapes',
        },
    ];
    getBasicShapes(): NodeModel[] {
        let nodes: NodeModel[] = [
            {
                id: 'rectangle',
                shape: {
                    type: 'Basic',
                    shape: 'Rectangle',
                },
            },
            {
                id: 'plus',
                shape: {
                    type: 'Basic',
                    shape: 'Plus',
                },
            },
            {
                id: 'triangle',
                shape: {
                    type: 'Basic',
                    shape: 'RightTriangle',
                },
            },
        ];
        return nodes;
    }

    getNodeDefaults(node: NodeModel) {
        node.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop;
    }
    dragOver(args: IDragOverEventArgs) {

        if (args.target) {
            //Target shape id
            console.log((args.target as any).id);
        }
        //Dragged symbol
        console.log((args.element as any).id);
        //customize
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Drop event

The Drop event triggers when a symbol is successfully dropped onto the diagram surface. This event serves as the final step in the drag-and-drop process and provides access to both the dropped symbol and the target location.

The IDropEventArgs provides the following properties:

Property Type Description
element NodeModel / ConnectorModel The dropped element.
source Diagram The source diagram reference.
target Diagram The target diagram reference.
cancel boolean Whether to cancel the drop operation. 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, SymbolPaletteModule, NodeModel, PaletteModel, IDropEventArgs } from '@syncfusion/ej2-angular-diagrams'

@Component({
    imports: [
        DiagramModule, SymbolPaletteModule
    ],

    providers: [],
    standalone: true,
    selector: "app-container",
    template: `<ejs-symbolpalette id="symbolpalette" [palettes]="palettes" [symbolHeight]=50 [symbolWidth]=70>
    </ejs-symbolpalette>
    <ejs-diagram #diagram id="diagram" width="1000" height="500px"  (drop)="drop($event)"></ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public palettes: PaletteModel[] = [
        {
            id: 'basic',
            symbols: this.getBasicShapes(),
            title: 'Basic Shapes',
        },
    ];
    getBasicShapes(): NodeModel[] {
        let nodes: NodeModel[] = [
            {
                id: 'rectangle',
                shape: {
                    type: 'Basic',
                    shape: 'Rectangle',
                },
            },
            {
                id: 'plus',
                shape: {
                    type: 'Basic',
                    shape: 'Plus',
                },
            },
            {
                id: 'triangle',
                shape: {
                    type: 'Basic',
                    shape: 'RightTriangle',
                },
            },
        ];
        return nodes;
    }

    drop(args: IDropEventArgs) {
        //Dropped symbol
        (args.element as any).style.fill = 'yellow';
        (this.diagram as DiagramComponent).dataBind();
        //customize
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

PaletteExpanding event

The PaletteExpanding event triggers when a palette group is expanded or collapsed within the symbol palette. This event enables developers to control palette expansion behavior and implement custom logic based on palette state changes.

The IPaletteExpandArgs provides the following properties:

Property Type Description
palette PaletteModel The palette being expanded or collapsed.
cancel boolean Whether to cancel the expansion. 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { SymbolPaletteModule, NodeModel, PaletteModel, IPaletteExpandArgs } from '@syncfusion/ej2-angular-diagrams'

@Component({
    imports: [
        SymbolPaletteModule
    ],

    providers: [],
    standalone: true,
    selector: "app-container",
    template: `<ejs-symbolpalette id="symbolpalette" [palettes]="palettes" [symbolHeight]=50 [symbolWidth]=70 (paletteExpanding)="paletteExpanding($event)">
    </ejs-symbolpalette>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public palettes: PaletteModel[] = [
        {
            id: 'basic',
            symbols: this.getBasicShapes(),
            title: 'Basic Shapes',
        },
    ];
    getBasicShapes(): NodeModel[] {
        let nodes: NodeModel[] = [
            {
                id: 'rectangle',
                shape: {
                    type: 'Basic',
                    shape: 'Rectangle',
                },
            },
            {
                id: 'plus',
                shape: {
                    type: 'Basic',
                    shape: 'Plus',
                },
            },
            {
                id: 'triangle',
                shape: {
                    type: 'Basic',
                    shape: 'RightTriangle',
                },
            },
        ];
        return nodes;
    }
    paletteExpanding(args: IPaletteExpandArgs) {
        if (args.isExpanded) {
            alert('Palette expanded');
        } else {
            alert('Palette collapsed');
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

PaletteSelectionChange event

The PaletteSelectionChange event triggers when the selection changes within the symbol palette. This event provides information about both the previously selected and newly selected symbols, enabling developers to respond to selection changes appropriately.

The IPaletteSelectionChangeArgs provides the following properties:

Property Type Description
oldValue NodeModel / ConnectorModel The previously selected symbol.
newValue NodeModel / ConnectorModel The newly selected symbol.
cancel boolean Whether to cancel the selection change. 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { SymbolPaletteModule, NodeModel, PaletteModel, IPaletteSelectionChangeArgs } from '@syncfusion/ej2-angular-diagrams'

@Component({
    imports: [
        SymbolPaletteModule
    ],

    providers: [],
    standalone: true,
    selector: "app-container",
    template: `<ejs-symbolpalette id="symbolpalette" [palettes]="palettes" [symbolHeight]=50 [symbolWidth]=70 (paletteSelectionChange)="paletteSelectionChange($event)">
    </ejs-symbolpalette>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public palettes: PaletteModel[] = [
        {
            id: 'basic',
            symbols: this.getBasicShapes(),
            title: 'Basic Shapes',
        },
    ];
    getBasicShapes(): NodeModel[] {
        let nodes: NodeModel[] = [
            {
                id: 'rectangle',
                shape: {
                    type: 'Basic',
                    shape: 'Rectangle',
                },
            },
            {
                id: 'plus',
                shape: {
                    type: 'Basic',
                    shape: 'Plus',
                },
            },
            {
                id: 'triangle',
                shape: {
                    type: 'Basic',
                    shape: 'RightTriangle',
                },
            },
        ];
        return nodes;
    }
    // Triggered upon symbol selection change
    paletteSelectionChange(args: IPaletteSelectionChangeArgs) {
        //The selected symbol
        console.log((args as any).newValue);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See also