Excited

We’ve just released Ionic 2 Beta 6, and we couldn’t be more excited to share it with you! The last few releases include a ton of new features to make your development process easier:

Virtual Scroll allows you to create a virtual “infinite” list of data. Instead of rendering all records in the list, only a small subset of records are rendered on the screen. This makes for a smoother scrolling experience. It’s more performant than collection-repeat, its previous incarnation, and has many new features, like dynamically setting section headers and footers.

The Loading component is an overlay used to indicate activity while blocking user interaction. By default, it uses the Ionic Spinner specified by the mode. This gives the application a native look based on the platform’s default mode, without any extra work. The spinner can be changed to any of our predefined spinners, or removed entirely, in favor of adding a custom spinner.

conference app - loading

Theming: We’ve added the ability to pass a base and contrast color to the predefined Sass $colors map, in order to customize your components even more.

Support for the hardware back button means it’s now possible to override the back button on the device. Now, the back button behaves just like a native app: Instead of exiting the app, it removes the current view and transitions back in the navigation stack, and if there are no more views to remove from the navigation stack, then it will exit the app.

The Select component now has the option to open in an action sheet interface instead of the default alert interface. The action sheet interface only supports single value selects and cannot have more than six options to select from. Otherwise, it turns into the alert interface. Thanks to community member @manucorporat for Pull Request #5788, which added this.

Material Design: Desktop browsers are now using the Material Design mode by default. The iOS mode will still take effect on iOS devices, and Windows Platform will take effect on Windows devices.

Slides: We’ve added and exposed new methods, in order to have more control over the Slides.

The Toast component is a subtle notification that appears at the bottom of the screen. It’s useful for providing feedback about an operation or displaying system messages. Thanks to community member @dmackerman at Modus Create for Pull Request #5906, which added this.

Thanks

We want to thank the large group of awesome developers who have made contributions to the Ionic Framework. Whether it was by reporting an issue, submitting a pull request, helping out in the community on GitHub, the forum, our Slack channel, or any of the many other ways to contribute, we are grateful for your help!

Do you want to contribute to Ionic 2? We’d love it if you did! Please see our contributing documentation for some of the ways you can contribute.

What’s on our roadmap for Ionic 2, going forward?

  • Date/time inputs: We are adding embeddable datepickers, which will make it possible to place a datepicker anywhere in your app, similar to adding an event in the iOS calendar app. Additionally, this will come with an all-new API and will include the ability to create wildly customizable pickers.
  • Swipeable tabs: We’re working on giving you the ability to swipe between tabs in your app, similar to the Material Design tabs.
  • Popover: This will give you a way to present a list of actions in an app. It can be useful as an overflow menu for less often used actions, such as a link to the application settings, or a link to an about page.
  • Range slider: This UI component consists of a slider with a handle that can be dragged to select a specific value from a range.
  • Inset Modals: We plan on adding an option to make inset modals, which will be the default on larger screens. Instead of taking up the full width and height of the viewport, an inset modal will only take up a portion of the width and height, similar to an alert.
  • The option to reorder or delete items in a list is a commonly used feature of Ionic 1. We plan on implementing a similar feature in Ionic 2.
  • Chips are a basic component in Material Design. They are small blocks that hold information about something more complex. Thanks to Pull Request ionic2#884 by @3dd13, these have been added, but we plan on tweaking them and adding documentation.
  • Right to left support is a requirement for many applications. We have been working with the community to get more information on how RTL works, and we are continuously adding support for it to the framework.

Looking for a place to keep track of what we’re working on? Check out our roadmap document, which we keep up to date with milestone changes, or the version 2 beta milestones on GitHub.

Signup for the Ionic Newsletter to get the latest news and updates!

  • http://www.raymondcamdencom/ Raymond Camden

    If I built a new Ionic app Sunday, how do I know what version of the library I have? Normally I’d use ionic lib, but it doesn’t seem to handle v2 yet.

    • Daniel Blanco

      Look at the package.json file in the app’s root folder, you should see the dependency version there. For example:

      “ionic-angular”: “2.0.0-beta.4”

      • http://www.raymondcamdencom/ Raymond Camden

        Thanks – looks like I got 6. Having issues so wanted to make sure I was on latest.

        • Daniel Blanco

          You’re welcome!

    • yesimahuman

      Since we just use npm, you can use npm commands like

      npm view ionic-angular version

      • http://www.raymondcamdencom/ Raymond Camden

        Cool. Is it a known bug that ionic lib doesn’t handle v2 stuff yet?

        • yesimahuman

          We’re deprecating and removing it since it’s no longer necessary with npm and a proper bundler that can load assets from node_modules but output in a static web location. We didn’t do that with v1 so lib just copied the assets over which is no longer necessary.

          • http://www.raymondcamdencom/ Raymond Camden

            Fair enough, but please document it. Not every Ionic user will be familiar with npm and I can see this being a faq.

    • forextor

      I normally use this command `npm outdated` and it will show you what version you have and what version is on the server.

  • Deepak Vishwakarma

    hi ,
    I m using ionic 1.7.14 and created an App which is on play store now ,
    and also i hv done some css changes to my requirements .
    i want to switch to newer version so , do i need to change my controllers method OR it will taken care that i have already created ?

  • Xander

    I think Ionic should decouple from Angular and build js libraries that can be pulled in to any javascript framework. I’ve invested quite some time and built a lot of VueJs apps in the last 1,5 years. Before that I worked with AngularJS a lot and before that I worked with BackboneJS. I’m learning to work with ReactJS.

    As you can read, you could imagine that learning ‘yet another js framework’, for me, feels like a big deal. I could..but I just start to get very very comfortable with my favorite framework(VueJS).

    I can image other developers using EmberJS, or any other framework out there, will feel the same way. Ionic’s tools( I just installed the v2 [email protected] ) are great. I wish I could work with Ionic without having to learn angular 2.

    If these things are already possible then I’m very pleased. I just started to play with Ionic a week ago, so I’m still finding interesting resources ..very fresh.

  • http://www.codingandclimbing.co.uk Dave Shirman

    So how do you catch the “platform.backbutton” event then to override it as suggested in the post?

    previously, I’ve been using “document.addEventListener(‘backbutton’)”, but now that’s broken as of the latest beta 6.

    Thanks!

  • http://andryanmiller.com Ryan Miller
  • Nuno Arruda

    I think you should make the support for Ionic.io services in v2 a priority (specially for push notifications) before all those new components goodness 🙂

  • 7200rpm

    So what is the easiest way to upgrade? Right now I am just updating the package.json file, but this has a cascading effect of updating angular2, etc and seems clumsy. Is there a better way that I’m missing?