GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ionic-team → Tutorial Photo Gallery Angular

ionic-team / Tutorial Photo Gallery Angular

Photo Gallery Tutorial: Ionic Angular and Capacitor

Programming Languages

typescript
32286 projects

Labels

angularionicionic-framework

Projects that are alternatives of or similar to Tutorial Photo Gallery Angular

Gugujiankong
Ionic App for website online monitor / website test speed / website SEO
Stars: ✭ 386 (+428.77%)
Mutual labels:  ionic, ionic-framework
Nativescript Ionic Template
📱 🖥 Create Mobile First apps, Web and Native sharing the code with Angular 🎉
Stars: ✭ 65 (-10.96%)
Mutual labels:  ionic, ionic-framework
Ionic Native Transitions
[Maintenance only] Native transitions (iOS & Android) for Ionic Framework
Stars: ✭ 589 (+706.85%)
Mutual labels:  ionic, ionic-framework
Ionic Google Login
Ionic 4 starter app to show you how to add Google Log In to an Ionic App using Google Sign-In Cordova Plugin.
Stars: ✭ 61 (-16.44%)
Mutual labels:  ionic, ionic-framework
Google Login With Ionic Framework
Ionic example app of how to add Google Plus authentication into an Ionic Framework app. Add google login to your ionic app!
Stars: ✭ 24 (-67.12%)
Mutual labels:  ionic, ionic-framework
Ionic Environment Variables
Easy to use environment variables for Ionic3!
Stars: ✭ 278 (+280.82%)
Mutual labels:  ionic, ionic-framework
Ionic5 Starter App Tutorial
Free Ionic Starter Template - Ionic 5 example app. Learn how to start using Ionic 5 to create a simple app with lists, forms and navigation and more!.
Stars: ✭ 47 (-35.62%)
Mutual labels:  ionic, ionic-framework
ionic4-angular6-crud-example
Building CRUD Mobile App using Ionic 4, Angular 6 and Cordova
Stars: ✭ 50 (-31.51%)
Mutual labels:  ionic, ionic-framework
Ion Affix
A directive for Ionic framework for creating affix headers.
Stars: ✭ 58 (-20.55%)
Mutual labels:  ionic, ionic-framework
Ionic Custom Components
Ionic 3/4 Custom Components. Spend less time on design and more time on coding! Free to use for everyone! 🧙‍♂️
Stars: ✭ 23 (-68.49%)
Mutual labels:  ionic, ionic-framework
ionic-modal-custom-transitions
Add Custom Transitions to Ionic Modals.
Stars: ✭ 22 (-69.86%)
Mutual labels:  ionic, ionic-framework
Ionic4
This repo contains example code for ionic4. Get Step by Step tutorial of this repo examples using https://ampersandacademy.com/tutorials/ionic-framework-4
Stars: ✭ 37 (-49.32%)
Mutual labels:  ionic, ionic-framework
ngx-ionic-image-viewer
An Ionic 4 Angular component to view & zoom on images and photos without any additional dependencies.
Stars: ✭ 129 (+76.71%)
Mutual labels:  ionic, ionic-framework
Nextjs Tailwind Ionic Capacitor Starter
A starting point for building an iOS, Android, and Progressive Web App with Tailwind CSS, React w/ Next.js, Ionic Framework, and Capacitor
Stars: ✭ 315 (+331.51%)
Mutual labels:  ionic, ionic-framework
ionic-signature-pad
Ionic plugin to input singnature pad
Stars: ✭ 15 (-79.45%)
Mutual labels:  ionic, ionic-framework
Ionic Pwa Toolkit
Build lightning fast Progressive Web Apps with zero config and best practices built-in. Go from zero to production ready with Ionic and Stencil (Web Components).
Stars: ✭ 629 (+761.64%)
Mutual labels:  ionic, ionic-framework
ionic-native-sms-retriever-plugin-master
Cross-platform plugin for Cordova / PhoneGap to Retrieve SMS. Available for Android.
Stars: ✭ 16 (-78.08%)
Mutual labels:  ionic, ionic-framework
ionic-surveyjs
Sample project that shows how to integrate SurveyJS in Ionic APP.
Stars: ✭ 28 (-61.64%)
Mutual labels:  ionic, ionic-framework
Awesome Ionic
An "awesome" list of Ionic resources
Stars: ✭ 799 (+994.52%)
Mutual labels:  ionic, ionic-framework
Ionic Navigation And Routing
🎉 Ionic 5 tutorial to learn how to master Routing and Navigation in Ionic Angular Apps as well as some usability tricks you can add to your Ionic Framework apps to make them look even better!
Stars: ✭ 35 (-52.05%)
Mutual labels:  ionic, ionic-framework
View All Similar Projects ➔

Build Your First Ionic App: Photo Gallery (Ionic Angular and Capacitor)

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).

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 Storage.

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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].