Awesome Ionic

⚡ A curated list of awesome resources related to the Ionic Framework.
Ionic is an open-source mobile application framework that makes it easy to build cross-platform mobile apps with web technologies.

➡️ Get Instant updates for your Capacitor App with Capgo 🚀

Fix your annoying bug now, Hire a Capacitor expert 💪

Contents

• Current Ionic version
• Official Resources
• Ionic Fundamentals
• Theming
• Components tutorials
• Authentication
• Unit Testing
• Ionic Native / Cordova Plugins
• Payment Gateway Integrations
• Backend as a Service
• i18n & l10n
• Tools
• Video Tutorials
• Books
• Boilerplate/Demo Apps
• Components
  • Libraries
  • Animations
  • UI Library
  • Menu, Tabs
  • Form / Input
  • Input - Date/Calendar
  • Lists/Table
  • Images
  • Charts/Diagram
  • Video/Audio
  • Keyboards
  • Dialog
  • Frames
• Open Source Projects
• Contribute
• Author

Current Ionic version

Official Resources

• Site
• Blog
• Documentation
• Getting Started Guide
• Ionic Native
• Community Forum
• Ionic YouTube Channel
• Showcase
• GitHub Repo
• Awesome Capacitor

Ionic Fundamentals

• Beginners Guide to Getting Started with Ionic

• Ionic First Look Series: Your First Ionic App Explained

• How to Convert an Ionic 1 Application to Ionic

• A Simple Guide to Navigation in Ionic

• 10 Minutes with Ionic: Adding Pages and Navigation

• How to Create a Data Model in Ionic

• Ionic and External Libraries

• Understanding Zones and Change Detection in Ionic & Angular 2

• Custom Pipes in Ionic

• How to Manipulate Data in Ionic: Part 1

• How to Manipulate Data in Ionic: Part 2

• Filtering, Mapping, and Reducing Arrays in Ionic

• Your First Ionic App: Angular

• Read SMS in Ionic 4 apps

• Geolocation with Capacitor

• Push Notifications with Firebase in Ionic

• Google Vision in Ionic 4 apps

• Add headless ButterCMS to your Ionic App by Mike Hartington

Theming

• A Guide to Styling an Ionic Application

• A List of Common CSS Utility Attributes in Ionic

• 5 Animation Packages You Can Immediately Use Inside Your Ionic App

Components tutorials

• How to Create a Sliding Delete Button for Lists
• Creating a Sliding Introduction Component in Ionic
• How to Create a Custom Loading Component in Ionic
• Build a Simple Progress Bar Component in Ionic
• Create a News Feed with 360-Degree Photo Viewing in Ionic
• Build a Tap to Reveal Component in Ionic

Authentication

• Twitter Login in Ionic 4 App using Firebase
• Facebook Login in Ionic with Firebase
• Google Login in Ionic 4 App using Firebase
• Firebase Anonymous Authentication
• Firebase Email/Password Authentication
• Add Touch ID Authentication To An Ionic Mobile App
• Using An Oauth 2.0 Service Within An Ionic Mobile App
• Ionic and Auth0
• Authenticate Ionic with WordPress

Unit Testing

• How to Unit Test an Ionic Application
• Test Driven Development in Ionic: An Introduction to TDD

Ionic Native / Cordova Plugins

• Playing music in Ionic 4 apps

• How to implement health plugin - Pedometer in Ionic 4

• Using Cordova Plugins in Ionic with Ionic Native

• 10 Minutes with Ionic: Using the Camera with Ionic Native

• Determine Network Availability

• Monetize With Google Admob In An Ionic Mobile App

• Show Native Toast Notifications In An Ionic Mobile App

• Use SQLite In Ionic Instead Of Local Storage

• Launch Websites With Ionic Using The InAppBrowser

• Add Barcode Scanning Functionality To Your Ionic App

• Use Google Analytics In An Ionic Android And iOS App

• Share Things On Social Media Via An Ionic Mobile App

• Adding Background Geolocation to an Ionic Application

• Getting Familiar with Local Notifications in Ionic

• Create a Nearby Places List with Google Maps in Ionic – Part 1

• Create a Nearby Places List with Google Maps in Ionic – Part 2

Payment Gateway Integrations

• Stripe Payment Integration in Ionic
• PayPal Integration in Ionic
• Ionic 4 Apple Pay Payment Integration
• Ionic 4 Razorpay Payment Integration

Backend as a Service

• 10 Minutes with Ionic: Calling an API
• Using Http to Fetch Remote Data from a Server in Ionic
• Posting data from Ionic app to a PHP server
• Make HTTP Requests In An Ionic Android And iOS App

i18n & l10n

• Localizing Ionic Apps with ngx-translate
• attranslate - Semi-automated translation of JSON and other resource files.

Tools

• Ionic2-vscode
• Vim-ionic2
• Capacitor safe area simulator - Chrome extension to simulate safe area in the browser, it support Ionic, Knsta UI and Tailwind Capacitor.
• Capgo Skills - Test your Ionic/Capacitor skills with interactive challenges.
• Capgo Security Scanner - Scan your Capacitor app for security vulnerabilities.
• Capgo Semver Tester - Test semantic versioning compatibility for Capacitor plugins.
• AASA Tester - Test Apple App Site Association files for iOS Universal Links.

Video Tutorials

• Build a Todo App from Scratch with Ionic
• Ionic: How to Use Google Maps & Geolocation
• Build a Custom Flash Card Component in Ionic
• Hacking CSS in Ionic
• Learn Ionic 3 From Scratch

Books

• Building Mobile Apps with Ionic

Boilerplate/Demo Apps

• Ionic Official Starter Templates

• Ionic Boilerplate

• Cordova File Transfer

• Update your App

• NFC Demo

• Fullscreen Content

• Card Layout

• Ionic 2

• Ionic 2 Advanced Components

• OCR Scan App

• Ionic 4 Payment Gateway Starter - Stripe

• Ionic 4 Payment Gateway Starter - Paypal

• Ionic 4 Payment Gateway Starter - Razorpay

• Ionic 4 Payment Gateway Starter - Apple Pay

• Ionic 5 Complete App and PWA Starter

• Ionic 5 Complete Taxi Booking Platform Starter

• Ionic 5 Grocery Shopping Starter with Admin Panel

• Ionic 5 Tinder Starter

• Ionic 5 Food Delivery App Starter

• Ionic 6 Capacitor Full App Starter

Components

Libraries

• Capacitor Tailwind - A Tailwind CSS plugin for Capacitor.
• Ionic Blocks - A collection of free and premium Ionic components.

Animations

• Lottie Animation
• Lottie Animation

UI Library

• Ionic 4 UI Component Library

Menu, Tabs

• Scrollabel Tabs
• Circular Tabs
• Fab Toolbar
• Multi Level Sidemenu
• Popover Sidemenu
• Drop down Title

Form / Input

• Autocomplete
• Form Generator based on JSON
• Dynamic Forms
• Form Builder
• Sidemenu tabs
• Selectable
• Masks

Input - Date/Calendar

• Calendar
• Calendar
• Calendar
• Calendar (very powerful)
• Calendar - Fullcalendar
• Datepicker
• Datepicker (selectable range dates calendar)
• Datepicker
• Rating
• Inputfield Mask

Lists/Table

• Sortable/Filter Tables
• Smart table (sorting, filtering)
• Flexible and Light Table

Images

• Signatur - Works perfect with Ionic.
• Image Fallback
• Lazy Load
• Image Loader
• Facebook Gallery
• Image Viewer
• Gallery Modal
• Image Zoom

Charts/Diagram

• Charts
• D3 Service
• D3 Angular Examples
• D3 Line/Bar/Pie Charts

Video/Audio

• Video Editor
• Simple Audioplayer

Keyboards

• Digit Keyboard

Dialog

• Dialogbox with Counter

Frames

• ng Lightning (for Salesforce Apps)

Open Source Projects

• Ionic Conference App
• IonicRealty
• Ionic Firebase Chat App
• Ionic Ecommerce App
• Ionic Conference App based on Lanyrd API
• Ionic Stock Tracking App
• Ionic Wordpress Client
• Ionic Media Player
• Ionic Social App
• Ionic 5 WhatsApp clone
• Ionic 5 Social Network Starter
• Ionic Push Notification
• Ionic Weather app
• Ionic Reddit Reader
• Ionic aiEyes - Azure Computer Vision API
• Ionic Soundboard
• Firebase push notifications in Ionic 4
• Receive SMS automatically in Ionic 4
• Playing music in Ionic 4
• Ionic 4 Stripe Payment Integration
• Ionic 4 PayPal Payment Integration
• Ionic 4 Apple Pay Payment Integration
• Ionic 4 Razorpay Payment Integration
• Ionic 4 Twitter login with Firebase
• Ionic 4 Facebook login with Firebase
• Translation in Ionic 4 - Internationalization and localization

Contribute

Contributions welcome! Read the contribution guidelines first.

Author

Capgo — Live updates for capacitor