How to Use Annotation as a Placeholder in Angular Diagram?

Annotation is a block of text that can be displayed over a node or connector. Annotation is used to textually represent an object with a string that can be edited at runtime. Multiple annotations can be added to a node/connector.

Currently, the Angular Diagram annotation feature does not support a placeholder for empty annotations. However, there is a workaround to use an annotation as a placeholder. This can be achieved by reducing the opacity of the annotation and displaying placeholder text. Once the annotation is edited by the user, the textEdit event is triggered, In this event, we can set the opacity back to its default value for clear visibility in the annotation.

public nodeDefaults(node: NodeModel): NodeModel {

       if (node.annotations.length > 0) {
           for (let i = 0; i < node.annotations.length; i++) {
               let annotation = node.annotations[i]
               if (annotation.content == '' || annotation.content == 'placeholder') {
                   annotation.content = "placeholder"
                   annotation.style.opacity = 0.5
               }else
               {
                   annotation.style.opacity = 1
               }
           }
       }
       return node;
   }; 

Below is a code example demonstrating how to use the textEdit event for placeholder

public textEdit(args: ITextEditEventArgs) {
   if (args) {
           if (args.newValue !== "") {
               (args.annotation as AnnotationModel).style.opacity = 1;
               this.diagram.dataBind(); 
           } else if(args.newValue == "" || args.newValue == "placeholder"){     
               args.cancel=true;
               (args.element.annotations[0] as AnnotationModel).content = "placeholder";
               (args.element.annotations[0] as AnnotationModel).style.opacity = 0.5;
              
               this.diagram.dataBind(); 
           }

       }
      
   } 

Sample : Click here for sample

Conclusion

I hope you enjoyed learning how to use annotation as a placeholder in Angular Diagram.
You can refer to our Angular Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Diagram example to understand how to create and manipulate data. For current customers, you can check out our 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 other controls. 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, Direct-Trac, or feedback portal. We are always happy to assist you!