Skip to content

Photo Gallery App - Created with Ionic Angular and Capacitor

Notifications You must be signed in to change notification settings

Marjory00/photo-gallery

Repository files navigation

Ionic App : Photo Gallery

Ionic Angular and Capacitor

Build a photo-gallery app that runs on iOS, Android, and the web. Follow along to create a complete CRUD (create-read-update-delete) experience.

For more info: "Your First App: Angular" guide.

Powered by Ionic Angular (web app) and Capacitor (native app runtime).

How It Works

After the user navigates to Tab 2 (Photos), they can tap/click on the camera button to open up the device's camera. After taking or selecting a photo, it's stored permanently into the device's filesystem. When the user reopens the app at a later time, the photo images are loaded from the filesystem and displayed again in the gallery. The user can tap on a photo to be presented with the option to remove the photo.

Feature Overview

Project Structure

  • Tab2 (Photos) (src/app/tab2/): Photo Gallery UI and basic logic.
  • PhotoService (src/app/services/photo.service.ts): Logic encapsulating Capacitor APIs, including Camera, Filesystem, and Preferences.

How to Run

Note: It's highly recommended to follow along with the tutorial guide, which goes into more depth, but this is the fastest way to run the app.

  1. Install Ionic if needed: npm install -g @ionic/cli.
  2. Clone this repository.
  3. In a terminal, change directory into the repo: cd photo-gallery-capacitor-ng.
  4. Install all packages: npm install.
  5. Run on the web: ionic serve.
  6. Run on iOS or Android: See here.