Photo Gallery Tutorial: Ionic Angular and Capacitor
OTHER License
Get started with Ionic by building a photo gallery app that runs on iOS, Android, and the web - with just one codebase. This is the complete project referenced in the "Your First App: Angular" guide. Follow along to create a complete CRUD (create-read-update-delete) experience.
Powered by Ionic Angular (web app) and Capacitor (native app runtime).
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.
src/app/tab2/
): Photo Gallery UI and basic logic.src/app/services/photo.service.ts
): Logic encapsulating Capacitor APIs, including Camera, Filesystem, and Preferences.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.
npm install -g @ionic/cli
.cd photo-gallery-capacitor-ng
.npm install
.ionic serve
.