How can I help you?
Labels in Angular Diagram Component
29 Aug 202511 minutes to read
Annotation is a block of text that can be displayed over a node or connector. Annotations are used to textually represent an object with a string that can be edited at runtime. Multiple annotations can be added to a node or connector.
Create annotations
An annotation can be added to a node or connector by defining the annotation object and adding it to the annotations collection of the node or connector. The content property of the annotation defines the text to be displayed. The following code illustrates how to create an annotation.
To create and add annotations to Nodes and Connectors using the Angular Diagram, refer to the below video link.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, PointModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" >
<e-nodes>
<e-node id='node1' [offsetX]=150 [offsetY]=150 [width]=100 [height]=100>
<e-node-annotations>
<e-node-annotation content="Annotation">
</e-node-annotation>
</e-node-annotations>
</e-node>
</e-nodes>
<e-connectors>
<e-connector id='connector' type='Orthogonal' [sourcePoint]='sourcePoint1' [targetPoint]='targetPoint1'>
<e-connector-annotations>
<e-connector-annotation content='Annotation'>
</e-connector-annotation>
</e-connector-annotations>
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public sourcePoint1?: PointModel;
public targetPoint1?: PointModel;
ngOnInit(): void {
this.sourcePoint1 = { x: 300, y: 100 };
this.targetPoint1 = { x: 400, y: 300 };
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));NOTE
When setting an annotation’s ID, ensure that it does not contain white spaces, does not start with numbers or special characters, and does not include special characters like underscores (_) or spaces.
Add annotations at runtime
Annotations can be added at runtime by using the client-side method addLabels. The following code illustrates how to add an annotation to a node.
The annotation’s id property is used to define the name of the annotation and is further used to find the annotation at runtime and perform any customization.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, Diagram, ShapeAnnotationModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
template: `
<div class="button">
<button id="addButton" (click)='onClick($event)'>Add Annotation</button>
</div>
<ejs-diagram #diagram id="diagram" width="100%" height="580px">
<e-nodes>
<e-node id='node1' [offsetX]=150 [offsetY]=150 [width]=100 [height]=100>
</e-node>
</e-nodes>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public annotation?: ShapeAnnotationModel[];
onClick = (args: MouseEvent) => {
this.annotation = [{
id: 'label1',
content: 'Annotation'
}];
//Method to add labels at run time
(this.diagram as Diagram).addLabels((this.diagram as Diagram).nodes[0], this.annotation);
(this.diagram as Diagram).dataBind();
}
}Update annotations at runtime
Annotations can be updated directly by accessing the annotation from the node’s annotations collection property and modifying any annotation properties at runtime. To reflect the changes immediately, call the dataBind method.
The following code example illustrates how to change the annotation properties.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, Diagram, NodeModel, ShapeStyleModel, ShapeAnnotationModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
template: `
<div class="button">
<button id="UpdateButton" (click)='onClick($event)'>Update Annotation</button>
</div>
<ejs-diagram #diagram id="diagram" width="100%" height="580px">
<e-nodes>
<e-node id='node1' [offsetX]=150 [offsetY]=150 [width]=100 [height]=100>
<e-node-annotations>
<e-node-annotation id="label1" content="Annotation">
</e-node-annotation>
</e-node-annotations>
</e-node>
</e-nodes>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
onClick = (args: MouseEvent) => {
((this.diagram as Diagram).nodes[0].annotations as ShapeAnnotationModel[])[0].content = 'Updated Annotation';
(this.diagram as Diagram).dataBind();
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Remove annotations
A collection of annotations can be removed from the node by using the diagram method removeLabels. The following code illustrates how to remove an annotation from a node.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, Diagram, NodeModel, ShapeAnnotationModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
template: `
<div class="button">
<button id="clearButton" (click)='onClick($event)'>Remove Annotation</button>
</div>
<ejs-diagram #diagram id="diagram" width="100%" height="580px">
<e-nodes>
<e-node id='node1' [offsetX]=150 [offsetY]=150 [width]=100 [height]=100>
<e-node-annotations>
<e-node-annotation id="label1" content="Annotation">
</e-node-annotation>
</e-node-annotations>
</e-node>
</e-nodes>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public annotation: ShapeAnnotationModel[] = [
{
id: 'label1', content: 'Annotation'
}
];
onClick = (args: MouseEvent) => {
(this.diagram as Diagram).removeLabels(((this.diagram as Diagram).nodes as NodeModel[])[0] as any, this.annotation);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));