Implementing Full Screen Mode in Angular Image Editor

This article guides you through the process of adding a custom button to the Angular Image Editor toolbar to enable full screen mode. This feature enhances the user experience by allowing users to toggle between full screen and normal view modes while editing images.

Prerequisites

Before proceeding, ensure you have the following:

• Syncfusion Angular Image Editor installed in your project
• Basic knowledge of Angular and TypeScript

Step-by-Step Implementation

1: Add Image Editor to Your Application

First, include the Image Editor component in your HTML file with the necessary event bindings for creation and toolbar updates.

<ejs-imageeditor
  id="image-editor"
  (created)="created()"
  (toolbarCreated)="addFullScreenBtn($event)"
  (toolbarUpdating)="addFullScreenBtn($event)">
</ejs-imageeditor>

2. Define Full Screen State

First, define a boolean property to keep track of the full screen state.

public isFullScreen: boolean = false;

3. Create the Image Editor

Implement the created method to initialize the Image Editor and open an image.

public created = (): void => {
  const imageEditor: ImageEditorComponent = getComponent(
    document.getElementById('image-editor'),
    'image-editor'
  ) as ImageEditorComponent;
  imageEditor.open(
    'https://www.shutterstock.com/image-photo/linked-together-life-cropped-shot-600w-2149264221.jpg'
  );
};

4. Add Full Screen Button to Toolbar

Use the toolbarCreated and toolbarUpdating events to add a custom button to the toolbar.

public addFullScreenBtn(args: any): void {
  let toolbar: Toolbar = getComponent(document.getElementById('image-editor_toolbar'), 'toolbar');
  if (toolbar) {
    toolbar.addItems([{ id: 'fullscreen', tooltipText: 'Full Screen', prefixIcon: 'e-full-screen', click: this.fullScreenBtnClicked }], 6);
  }
}

5. Implement Full Screen Toggle

Create a method to handle the full screen button click event, toggling the full screen state and updating the Image Editor’s size and position.

public fullScreenBtnClicked(args: any): void {
  const imageEditor: ImageEditorComponent = getComponent(document.getElementById('image-editor'), 'image-editor') as ImageEditorComponent;
  const imageEditorParentElement = document.querySelector('.e-img-editor-sample');
  this.isFullScreen = !this.isFullScreen; // Toggle fullscreen state
  const sizeAndPosition = this.isFullScreen
    ? { width: '100vw', height: '100vh', top: '0px', left: '0px' }
    : { width: '600px', height: '500px', top: '200px', left: '50px' };
  Object.assign((imageEditorParentElement as any).style, sizeAndPosition);
  imageEditor.update();
}

Demo

To see a live example of the implementation, visit the following StackBlitz Example: StackBlitz Example

Additional References

• Syncfusion Angular Image Editor Documentation: https://ej2.syncfusion.com/angular/documentation/image-editor/getting-started/
• Angular Documentation: https://angular.io/docs
• TypeScript Documentation: https://www.typescriptlang.org/docs/

Conclusion

I hope you enjoyed learning about how to implement full screen mode in Angular Image Editor.

You can refer to our Angular Image Editor 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 Image Editor 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, support portal, or feedback portal. We are always happy to assist you!