How to Show Annotations in Main Toolbar of Angular Image Editor

3 mins read

This article explains how to customize the main toolbar of the Angular Image Editor component to include annotation tools, enabling users to draw shapes and add text directly on the image canvas.

Show Annotations in Main Toolbar of Angular Image Editor

To display annotation tools directly in the main toolbar of the Angular Image Editor, you can customize the toolbar using the toolbar property and handle interactions via the toolbarItemClicked event.

You define a custom toolbar array that includes both default tools (like Crop, Zoom, Rotate) and annotation tools (like Rectangle, Ellipse, Arrow, etc.). When a user clicks on one of these annotation items, the toolbarItemClicked event is triggered. Inside this event handler, you check if the clicked item corresponds to a shape defined in your shapeMap. If it does, you call the enableShapeDrawing(shape, true) method from the Image Editor’s public API. This activates the drawing mode for the selected shape, allowing users to annotate the image directly.

Code Example

app.component.html

<ejs-imageeditor #imageEditor (created)="created()" [toolbar]="customToolbar" (toolbarItemClicked)="toolbarItemClicked($event)"></ejs-imageeditor>

app.component.ts

public customToolbar = [
   'Open',
   'Save',
   { text: 'Rectangle' },
   { text: 'Ellipse' },
   { text: 'Arrow' },
   { text: 'FreehandDraw' },
   { text: 'Line' },
   { text: 'Path' },
   { text: 'Text' },
 ];
 private shapeMap: {
   [key in
     | 'Rectangle'
     | 'Ellipse'
     | 'Arrow'
     | 'FreehandDraw'
     | 'Line'
     | 'Path'
     | 'Text']: ShapeType;
 } = {
   Rectangle: ShapeType.Rectangle,
   Ellipse: ShapeType.Ellipse,
   Arrow: ShapeType.Arrow,
   FreehandDraw: ShapeType.FreehandDraw,
   Line: ShapeType.Line,
   Path: ShapeType.Path,
   Text: ShapeType.Text,
 };

 public toolbarItemClicked(args: ClickEventArgs): void {
   // Check if the clicked item text is one of the keys in shapeMap
   const shape = this.shapeMap[args.item.text as keyof typeof this.shapeMap];
   if (shape) {
     this.imageEditorObj?.enableShapeDrawing(shape, true);
   }
 }

Output

When the application runs, the main toolbar of the Angular Image Editor will display both standard editing tools and annotation options such as Line, Rectangle, Ellipse, Arrow, and more. Clicking any of these will allow the user to draw the corresponding shape on the image.

Live Sample

StackBlitz Demo

Conclusion

I hope you enjoyed learning about how to show annotations in toolbar of Angular Image Editor.

You can refer to our Angular Image Editor’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Angular Image Editor and other Angular components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums,Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)