This article will curate the best resources, tools, libraries, and posts that will help you master Ionic 4 application development. I will cover everything from getting started with Ionic, third-party components, tutorials, tools, and testing, UI, etc.
One last thing, I will include only content published in 2019.
- Getting started with Ionic 4
- Demos, Sample Apps, and Boilerplates
- Themes & Templates
- Ionic Native / Cordova Plugins
Getting started with Ionic 4
The first step is always important.
- Installing Ionic
- Getting Started with Ionic
- Introduction to Ionic 4
- How to Build Your First Ionic 4 App with API Calls
- Ionic 4 vs Ionic 3 — What you need to know about Ionic 4
- Ionic 4.1 & Vue.js: Skeleton Text
- Using Vue with Ionic 4 and Cordova Plugins
Demos, Sample Apps, and Boilerplates
You need to start somewhere.
- Ionic 4 Starter App – Ionic 4 To Do List App. FREE Ionic 4 example app. Learn how to start using Ionic 4 to create a simple app with lists, forms and navigation.
- Ionic 4 Starter Theme – Ionic 4 start theme (v1.0.0) with: Angular 7 + @ionic/angular 4.0.0 final+ Ionic Native 5 + Ionic CLI 4.5.0
- ionic4-boilerplate – Boilerplate for ionic4 with CI based on travis and fastlane. doc and example are provided
- ionic-facebook-login – Ionic 4 starter app to show you how to add Facebook Log In to an Ionic App.
- 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
- ionic-twitter-login – Learn how to add Twitter Login to your Ionic 4 App. In this ionic framework tutorial we will build a ionic 4 example app with Twitter Authentication.
- movies-app – Ionic 4 Movies App
- ionic4-angular7-example – Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps
- app-starter – Sample project that shows how to build a Movies Catalog APP with Angular, Ionic 4, Capacitor and NGXS (State Management).
- vue-capacitor-ionic-app – A Mobile Demo App with Vue, Capacitor and Ionic 4 Components
- capacitor-vue-ionicv4-app – Sample app using capacitor vuejs and ionicv4 components
- ionic-vue-examples – Examples for @ionic/vue
- ionic4-sidemenu-auth – Building a Basic Ionic 4 Login Flow with Angular Router & Side Menu UI
- ionic4-image-viewer-example – This is an Ionic 4 sample project showing an image viewer with zoom functionality
- ionic4-ngrx-firebase – A basic application for Ionic 4 with firebase & ngrx actions, reducers and effects
- ionic-vue-starter – A basic application for Ionic 4 with firebase & ngrx actions, reducers and effects
- QLOCKGENERATOR – An Ionic v4 example project (PWA) to generate and export DXF, PDF and SVG files via maker.js and to assist you in designing your own front for your self-made word clock
- ionic3-whatsappclone – This is a template for WhatsApp for user with ionic framework. It’s just a template with no backend for now. For Ionic4 pick Ionic4 branch.
- ionic-react-auth-firebase – React with ionic v4 web components tabs, firebase authentication & mobx for state management
- ionic-meetup-vue2 – VueJS Hello World w/Ionic4
- ionic-vue – A Simple Ionic 4 App with Vue and Cordova
- Improved UX for Ionic apps with Skeleton Loading Screens – Learn the importance of adopting the App Shell pattern in your ionic apps and how to implement it using Ionic 4 + Angular 7 and some advanced CSS techniques
- ionic4-shoppingcart-slides – Dynamic Slides with Shopping Cart
- Meel – A campus social/dating app based on Ionic 4 and Angular 7
- ionic-music-app – Fully cross-platform ionic audio-streaming-app
- ionic4dialogflowchatbot – A starter app for developing a chatbot with ionic4, pusher and dialogflow
- my-react-ionic-app – ReactJS using Ionic framework components
- ionic4-wordpress-app – Ionic 4 WordPress app (iOS & Android)
- todo_app_ionic – Todo application in angular and ionic using best practices and performance optimized.
It’s always nice to have a wide variety of different application building blocks.
- angular-ionic-4-all-components-demo – Demo of Ionic 4 All Components in Angular
- demo-ionic-tab-routing – An Ionic project which shows different kinds of route definition for a tab based layout.
- ionic-navigation-and-routing-ultimate-guide – Ionic 4 tutorial exploring all the possibilities the new Ionic Navigation brings and also exploring some app shell usability tricks to make Ionic apps look even better
- angular-ionic-master-detail – This project show how to implement a Master Detail Pattern in Ionic 4 with Angular Routing.
- ionic4-angular7-httpinterceptor-example – Ionic 4 and Angular 7 Tutorial: HTTP Interceptor Basics
- ionic4-firebase-storage – File Upload from Ionic v4 App to Firebase Cloud Storage
- Ionic4 Angular8 CRUD Basics
- ionic4-image-crop-upload – Ionic 4, Angular 7 and Cordova Crop and Upload Image
- demo-ionic-tabs-back-button – An auto complete compatible compatible with both Ionic 2+ and Angular 2+.
- crud-ionic4 – Ionic 4 Crud Basics with Firebase
- ionic4-push-notifications – Ionic Push Notifications Basics
- ionic4-menu-tabs-example – Using Angular Router and Ionic Menu with Tabs
- ionic4-fontawesome – Use font awesome for Ionic 4
Themes & Templates
Give your application a little bit of shine.
- Ionic 4 Full Starter App – Ionic 4 Starter App with PRO features: Capacitor, Firebase Integration, Firestore CRUD, Maps, Geolocation, Video Playlist, Multi Language, Capacitor Plugins. Lots of professional Ionic Angular components to jump start your app development!
It’s always nice to have a wide variety of different application building blocks.
- ion2-calendar – A date picker component for Ionic2, Ionic3, and Ionic4.
- Ionic2-Calendar – A calendar directive for Ionic2 onwards
- ionic4-datepicker – Ionic 4 Datepicker component
- ionic4-date-picker – Calendar date picker for Ionic4 apps
- gx-mask – Angular Plugin to make masks on form fields and html elements
- – Helper directive for Ionic 4.x to generate circular avatar, based upon first letter of given text. Color can be generated automatically or can be submitted by the user.
- ionic-modal-custom-transitions – Add Custom Transitions to Ionic Modals.
- angular-progress-bar – This component allow you to easy incorporate progress-bar to angular/ionic project, providing binding and color options
- ionic-truncated-slider-cards – Customized slider component to achieve a fancy horizontal truncated slider, basically for short list of cards
- ngx-quill-ionic-v4 – Quill Rich Text Editor with Ionic 4
- ion-back-button-tabs – Advanced ion-back-button component.
- ionic4-hidenav – Ionic 4 header animations
- ionic4-auto-complete – An auto complete compatible compatible with both Ionic 2+ and Angular 2+.
- animating_header_directive – Ionic 4 Animating Header Directive
- ionic4-ecommerce-component – IONIC4 Ecommerce Components
- Ionic Timepicker component
- Ionic Skeleton Text – Skeleton Text is a component for rendering placeholder content. The element will render a gray block at the specified width.
- ngx-ion-simple-Mask – Input mask for Angular/Ionic
- Ionic 4 Bottom Navigation Drawer – Bottom navigation drawer component for Ionic 4/Angular
Ionic Native / Cordova Plugins
And let’s not forget Cordova.
- example-cordova-code-push-plugin – Ionic + Cordova Code Push Plugin Example
- Ionic 4, Angular 6 and Cordova: Export and View PDF File
- How to Build an In App Browser (web view) in Ionic App
- Cordova plugin for Luxand Face SDK – Cross-platform Face Recognition using Luxand Face SDK framework
Here's a Way You Can Support Us And Benefit at the Same TimeIf this article helped you here’s one thing you can do for me. While writing articles I’m using Notion tool for information gathering. It’s a modern alternative to Evernote. If you use Evernote or any similar application give also a chance to Notion. By signing up, you will get access to a very powerful tool, give me one more premium month, and in turn help me to write future articles.
More Ionic 4 Tutorials
- 100+ Curated List of Resources and Tools for Building Apps with Ionic 4
- Ionic 4 | Making REST HTTP Requests Like a Pro
- Ionic 4 | Sharing Data Between Pages/Components (Angular)
- Ionic 4 | Translate and Localize Your App With ngx-translate (Angular)
- Ionic 4 | How To Create And Validate Forms
- Ionic 4 | Cordova Google Maps Integration