You most certainly know about Ionic Framework – that modern mobile HTML5 framework built on the foundation off AngularJS. Ionic makes it very easy to create attractive and interactive hybrid mobile apps using only HTML5 and AngularJS. By default, it comes bundled with a sensible collection of directives. At the same time, it is very extensible, which is precisely the point of this article.
 
I wanted to create a resource list where me and my readers can find best known Ionic plugins. This way you don’t need to lose time searching for specific 3rd party features or directives. Let’s begin!
 
Note: This article will not talk about Cordova based plugins used in Ionic Projects, they are covered in a separate article.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
  1. Ionic Filter Bar
  2. Frosted Glass Blur
  3. Ionic Date Picker
  4. Ionic Time Picker
  5. Angular Formly
  6. Ion-Autocomplete
  7. Ion-Google-Place
  8. Ion-MD-Input
  9. Tinder Cards
  10. Swipeable Card UI
  11. Ionic Tabbed Slidebox
  12. Ionic Auto Divider
  13. Ion Affix
  14. Horizontal Scroll Cards
  15. Ion Slide Box Tabs
  16. Ion Alpha Scroll
  17. Ionic Wizard
  18. Ionic Rating
  19. Ion Sticky
  20. Ionic Ion AirbnbMenu
  21. Ion Gallery
  22. Ion Tree List
  23. Ionic Ion showWhen
  24. Ionic Segmented Control
  25. New
    Ionic Scroll Sista
  26. New
    Ionic Content Banner
  27. New
    ionicScroller
  28. New
    Hide-tabs directive
  29. New
    Ionic-ratings
  30. New
    Ionic-Cache-Src
  31. New
    Ionic-Datepicker
  32. New
    Ionic Animated Modal
 
Click here if you want to see other tutorials, or articles about Ionic themes, templates, plugins.
 
Ionic Filter Bar
 
Ionic Filter Bar is an alternative to default Ionic filter box. Instead in the content section, filter bar is now placed in a page header thus better mimicking native looking filter feature.
 
 
Usage GitHub
 
 
Frosted Glass Blur
 
While this is just a visual effect, it is also a stand alone Ionic plugin. The effect was made famous in later iOS versions. The primary concept requires blurring not only the top layer but also the content underneath it. Older mobile devices weren’t powerful enough to perform this feature so consider using this plugin only on a newer devices, preferably iOS ones!
 
 
Official Page and Demo GitHub and Usage
 
 
Ionic Date Picker
 
It almost feels like a tradition; most mobile frameworks will by default not come with an integrated date picker. Ionic proudly follows in this footsteps.
 
As it name states, Ionic Date Picker is a date picker directive build exclusively for Ionic framework. It is beautiful, fast, and what matter the most, it works.
 
 
Demo GitHub and Usage
 
 
Ionic Time Picker
 
Another plugin by rajeshwarpatlolla, developer of previously mentioned Ionic Date Picker.
 
This is a simple yet powerful time picker. It does precisely what you want from it and nothing else. To me, this is what plugin should look like.
 
 
Demo GitHub and Usage
 
 
Angular Formly
 
Angular Formly is an AngularJS plugin/module that helps with dynamic form customization and generation. It can directly render JavaScript/JSON configured forms.
 
While this is not Ionic framework plugin, it has a prebuilt template for Ionic forms. This makes it an excellent tool if your application consists of multiple forms, or you need to create form elements on the fly.
 
 
Official Site and Demo Ionic Demo GitHub and Usage
 
 
Ion-Autocomplete
 
Ion Autocomplete is an excellent configurable Ionic directive for an autocomplete dropdown. This is also a fork of ion-google-place directive (next plugin in line).
 
 
GitHub and Usage
 
 

Features

 
  • Multiple selection support
  • Configure a callback when an item is clicked
  • Configurable service which provides the items to list
  • Configure what is stored in the model and what is seen in the list
  • Configure all labels used in the component
  • Configure the template used to show the autocomplete component
Ion-Google-Place
 
Ion Google Place is an excellent configurable Ionic directive for location autocomplete dropdown that utilizes Google maps.
 
 
GitHub and Usage
 
 
Ion-MD-Input
 
This is a simple plugin that brings material design looking input box to Ionic.
 
 
Demo GitHub and Usage
 
 
Tinder Cards
 
This plugin represents swipeable card based layout for Ionic and Angular, just as seen at Tinder. Cards are swipeable from left to right and vice versa.
 
 
Demo GitHub and Usage
 
 
Swipeable Card UI
 
This plugin is a variation of a previously mentioned swipeable plugin; the only difference, cards are swipeable from top to bottom and vice versa.
 
 
Demo GitHub and Usage
 
 
Swipeable Card UI
 
This plugin is a wrapper of Ionic slidebox. This will contain tabs/icons at the top of the slidebox. Clicking the tabs/icons will trigger the slidebox to go to the corresponding page.
 
 
Demo GitHub and Usage
 
 
Ionic Auto Divider
 
This plugin gives you a set of directives for automatically adding in list dividers for a ng-repeat; works for both alphabetical and categories.
 
 
Demo GitHub and Usage
 
 
Ion Affix
 
This plugin is a lightweight Angular directive for Ionic framework to have sticky affix elements. Included directive requires no additional dependencies; just Ionic and Angular.
 
 
Official Site Demo GitHub and Usage
 
 
Ion Affix
 
This plugin is an Ionic plugin based off on Spotify’s featured playlist slider. Just add them to your Ionic app, it can’t be any easier!
 
 
Official Site and Demo GitHub and Usage
 
 
Ion Slide Box Tabs
 
This plugin is a directive that adds Tabs for the Ionic Slidebox, mimicking look & feel of the Android Tabs, with moving indicator at the bottom.
 
 
GitHub and Usage
 
 
Continue Reading

  • Is there some Meteoric (meteor + ionic without angular) plugins? Because I’d like to use filter bars and autocomplete in my app http://99folks.com

    • There are few of them, but I don’t understand what do you mean with “ionic without angular”?

    • I’m such a dummy, I miss understood your question on a first read. I don’t think there’s a such plugin, at least not at this point. Maybe in a near future but I would not hold my breath.

    • After some googling I did found a port of Ionic autocomplete plugin for Meteor: https://atmospherejs.com/barbatus/ionic-autocomplete though I don’t know if it will work with Meteoric

  • robert galvin

    Awesome list/ I have been using Ionic for a few months now and have not come across these. Thanks for putting out there.

  • aks

    not working for windows phone

  • Jennifer Chia

    Very useful list. Thanks for all your ionic articles!

  • Raghu A

    Very Very useful information. Thank you once again++

  • mrhieu

    agrrr thanks

  • akshath4u

    Thanks for sharing this..:)