How to add bullets/numbering to annotations in Angular Diagram component?

This article explains how to add bullets/numbering to annotations in the Angular Diagram component. In Syncfusion® Angular Diagram, we don’t have a built-in feature to add bullets/numbering to node/connector annotations. However, we can achieve this functionality by incorporating the Rich Text Editor into the diagram. By using the HTML template node, we can integrate the Rich Text Editor within the diagram. To implement this, we make use of the node template property of the diagram to render the Rich Text Editor.

app.component.html

 <ejs-diagram #diagram="" id="diagram" width="100%" height="740px">
     <ng-template #nodetemplate="" let-data="">
       <ng-container>
         <ejs-richtexteditor id="defaultRTE" height="600px">
         </ejs-richtexteditor>
       </ng-container>
     </ng-template>
     <e-nodes>
       <e-node id="node1" [offsetx]="400" [offsety]="400" [shape]="shape" [width]="600" [height]="600" [annotations]="annotations"></e-node>
     </e-nodes>
   </ejs-diagram>

app.component.ts

 public shape: HtmlModel = {
   type: 'HTML',
 };
 public annotations: any = [{ constraints: AnnotationConstraints.ReadOnly }]

After rendering the diagram with the integrated Rich Text Editor, if you wish to enable bullet points for typing and encounter an issue where pressing the Enter key does not move the cursor to the next line, you can resolve this by leveraging the commandManager property of the diagram. This property allows you to modify the behavior and ensure that pressing Enter appropriately moves the cursor to the next line.

The Command Manager allows you to define custom commands with properties such as execute, canExecute, gesture, parameter, and name.

• execute - A method to be executed.
• canExecute - A method to define whether the command can be executed at the moment.
• gesture - A combination of keys and KeyModifiers
• parameter - Defines any additional parameters that are required at runtime.
• name - Defines the name of the command.

We have enabled the Enter key without restrictions by specifying the Enter key in gesture property and returning the canExecute function as false.

<ejs-diagram #diagram="" id="diagram" width="100%" height="740px" [commandmanager]="commandManager">
</ejs-diagram>

 public commandManager: any = {
   commands: [
     {
       name: 'customCopy',
       parameter: 'node',
       canExecute: (): boolean => {
         return false;
       },
       execute: (): void => {},
       gesture: {
         key: Keys.Enter,
       },
     },
   ],
 };

Refer to the working sample for additional details and implementation:Sample

Conclusion

We hope you enjoyed learning about how to add bullets/numbering to annotations in the Angular Diagram component.

You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations. You can explore our Angular Diagram documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our Angular Diagram and other Angular components. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!