Skip to content
rdlabo.devdocs
日本語

Getting Started

Photo editor and viewer modal pages for Ionic Angular applications, with browser file selection and optional Capacitor camera/album support.

Installation

npm install @rdlabo/ionic-angular-photo-editor tui-image-editor

Select and display a photo in the browser

Register the TUI resize adapter (required for loadPhoto resizing), then pick a file and show the returned data URL:

import { Component, inject, signal } from '@angular/core';
import type { ApplicationConfig } from '@angular/core';
import { IonButton, IonImg } from '@ionic/angular';
import { providePhotoEditor, PhotoLoadError } from '@rdlabo/ionic-angular-photo-editor';
import { createTuiImageEditor } from '@rdlabo/ionic-angular-photo-editor/editor/tui';
import { PhotoFileService } from '@rdlabo/ionic-angular-photo-editor/file';

export const appConfig: ApplicationConfig = {
  providers: [
    providePhotoEditor({
      maxSize: 1000,
      createImageEditor: createTuiImageEditor,
    }),
  ],
};

@Component({
  selector: 'app-photo-pick',
  imports: [IonButton, IonImg],
  template: `
    <ion-button type="button" (click)="pick()">Select photo</ion-button>
    @if (previewUrl()) {
      <ion-img [src]="previewUrl()" alt="Selected photo"></ion-img>
    }
  `,
})
export class PhotoPickPage {
  private readonly photoFileService = inject(PhotoFileService);
  readonly previewUrl = signal('');

  async pick(): Promise<void> {
    try {
      const files = await this.photoFileService.loadPhoto({ limit: 1 });
      this.previewUrl.set(files[0] ?? '');
    } catch (error) {
      if (error instanceof PhotoLoadError && error.code === 'cancelled') {
        return;
      }
      throw error;
    }
  }
}

Click Select photo, choose an image — the preview appears. Native camera/album setup comes later under PhotoFileService.

Add a viewer or native camera

Install the dependencies for the features you add:

# viewer
npm install swiper

# native camera and album selection
npm install @capacitor/camera

For native camera access, configure Camera permissions and the adapter in PhotoFileService. Native iOS apps require iOS/iPadOS 16.4 or later.

Package entry points

Import path Exports
@rdlabo/ionic-angular-photo-editor Types, providePhotoEditor, PHOTO_EDITOR_CONFIG, PhotoLoadError
@rdlabo/ionic-angular-photo-editor/editor PhotoEditorPage
@rdlabo/ionic-angular-photo-editor/editor/tui opt-in createTuiImageEditor adapter
@rdlabo/ionic-angular-photo-editor/viewer PhotoViewerPage
@rdlabo/ionic-angular-photo-editor/file PhotoFileService
@rdlabo/ionic-angular-photo-editor/file/capacitor opt-in loadCapacitorPhotoCamera adapter

Import components and services only from their entry point. Import shared types and configuration from the root package.

Choose by editing goal

Goal Guide
Load a photo from camera or album PhotoFileService
Crop and edit in a modal Photo Editor
Browse images in a modal Photo Viewer
Override editor colors Theme
Upgrade from an earlier release Migration guide
Edit this page on GitHub