Add a FreeText annotation programmatically

[Sriraman]

Hi,

Can you tell me how to add FreeText annotation in our PDF viewer programmatically? Let's say I have a custom button in my application and clicking the button should add the free text annotation at specific location in the PDF viewer.

Let me know.

Thanks

[Chinnamunia Karthik Chinna Thambi]

Refer the below code snippet and sample to add the free text annotation at a specific location in the PDF viewer.

Code snippet:

 

  addFreeText() {

    var pdfViewer = (<any>document.getElementById('pdfViewer'))

      .ej2_instances[0];

      pdfViewer.annotation.addAnnotation("FreeText", {

        offset: {x: 100, y: 100}, 

        fontSize:16, 

        fontFamily: "Helvetica", 

        pageNumber: 1, 

        width: 200, 

        height: 40, 

        isLock: false, 

        defaultText: "Syncfusion",

      })

  }

Sample: https://stackblitz.com/edit/angular-sjkja5-f7zlkv?file=app.component.html,app.component.ts,package.json

[Sriraman]

Thanks for your reply.

1. Is there anyway to get the annotation ID of the newly added free text annotation?
   I can loop through the annotation collection and get the free text annotation. But if there are multiple free text annotations added at the same time, how we can identify the one which we added now.
   or is it possible to pass some ID while creating new free text annotation?
2. How to update the content of an existing Free text annotation programmatically.
3. How to move the free text annotation programmatically.

[Chinnamunia Karthik Chinna Thambi]

Find the details for the respective queries

Is there anyway to get the annotation ID of the newly added free text annotation? I can loop through the annotation collection and get the free text annotation. But if there are multiple free text annotations added at the same time, how we can identify the one which we added now. or is it possible to pass some ID while creating new free text annotation?	Yes, while adding the annotation in the PDF Viewer annotationAdd event is triggered by using this event you can get the newly added annotation id. Refer the below code snippet and sample to get the newly added free text annotation id in the console. Code snippet:     public add(args){     if (args.annotationType === "FreeText"){       console.log("annotationId:" + args.annotationId);      }   }   Sample: https://stackblitz.com/edit/angular-dxub1a-mlhlgn?file=app.component.ts,app.component.html,package.json,index.html
How to update the content of an existing Free text annotation programmatically.	Refer the below code snippet and sample to change the content of an existing Free text annotation programmatically.   Code snippet:     changeContent() {     var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];     for (let i = 0; i < viewer.annotationCollection.length; i++) {       if (viewer.annotationCollection[i].subject === "Text Box") {         viewer.annotationCollection[i].dynamicText = 'syncfusion';          viewer.annotation.editAnnotation(viewer.annotationCollection[i]);       }     }   } Sample: https://stackblitz.com/edit/angular-dxub1a-zzjmnt?file=app.component.ts,app.component.html,package.json,index.html
How to move the free text annotation programmatically.	Refer the below code snippet and sample to  move the free text annotation programmatically. Code snippet:     moveFreeText() {     var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];     for (let i = 0; i < viewer.annotationCollection.length; i++) {       if (viewer.annotationCollection[i].subject === "Text Box") {         var width = viewer.annotationCollection[i].bounds.width;         var heigth = viewer.annotationCollection[i].bounds.height;         viewer.annotationCollection[i].bounds = {x : 100, y: 100, width: width, height: heigth };          viewer.annotation.editAnnotation(viewer.annotationCollection[i]);       }     }   } Sample: https://stackblitz.com/edit/angular-dxub1a-rddbxs?file=app.component.ts,app.component.html,package.json,index.html