The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

Ionic 2 Beta 8 has arrived! This release brings many bug fixes, some breaking API changes and even a few new highly requested components!

We recommend reading the changelog for a full list of changes and, as always, letting us know on GitHub if you find any issues.

What’s New in Beta 8?

Popover has landed
A Popover is a dialog box that appears on top of the current page. It’s positioned relative to the element that was tapped to open it, or in the center of the view if no element was passed.

popovers

Popovers can be used for displaying all types of information, but they’re most commonly used for overflow actions that don’t fit in the navigation bar. Take a look at our Popover documentation, which includes different usage examples.

Ranges…forever
ranges
The Range is a slider that lets users select from an array of values by moving a slider knob along the slider bar or track. The Range component has one knob by default, but it can be customized to use two knobs with a lower and upper value. We’ve included a ton of properties that can be set to change the behavior of the Range, such as setting the number to step by, and adding a pin that displays the value while being dragged.

As with other v2 components, the Range comes with full platform continuity design for iOS, Android, and Windows versions. Make sure to check out the Range documentation for more information!

What’s Changed in Beta 8?

We’ve made some API changes in order to improve the framework and make it more compatible with other libraries. We’re hoping these changes will be the last major changes to the API. Let’s dig in.

Progressive Web App Support
The web is the future of apps: It runs everywhere, it’s the most widely known technology stack, and it powers a rapidly increasing number of apps. Progressive Web Apps give you the best of both worlds: cross-platform app store deployment on iOS, Android, and Windows, along with deployment to the mobile web with the same code!

We’ve started the process of optimizing Ionic 2 in specific ways that improve our support for Progressive Web Apps. Here’s the low down:

  • Ionic’s custom decorators have been removed.
  • @App and @Page should be replaced with @Component.
  • IonicApp has been renamed to App.
  • ionicBootstrap is required to bootstrap the app.
  • Config is now the third parameter in ionicBootstrap(rootComponent, providers, config).
  • Property prodMode is now a config option, enabling or disabling production mode.

Please see the changelog for a step-by-step guide to update your app.

Ionic Component Events
All Ionic component events have been renamed to start with ion. This is to prevent the Ionic events from clashing with native HTML events. For a full list of the events changed, please see the changelog.

Ionic Lifecycle Events
All Ionic lifecycle events have been renamed from the onPage prefix to an ionView prefix. The following is a full list of the name changes.

  • onPageLoaded renamed to ionViewLoaded
  • onPageWillEnter renamed to ionViewWillEnter
  • onPageDidEnter renamed to ionViewDidEnter
  • onPageWillLeave renamed to ionViewWillLeave
  • onPageDidLeave renamed to ionViewDidLeave
  • onPageWillUnload renamed to ionViewWillUnload
  • onPageDidUnload renamed to ionViewDidUnload

So, What’s Next?

We’re gearing up for a release candidate in the very near future! Our main focus in the coming weeks will be on performance improvements and improving existing components. If you’d like to know what we’re working on, take a look at the Ionic 2 Roadmap document, as well as our GitHub Milestones.

Thanks!

As we work towards a release candidate, we want to say thank you to everyone for all of your contributions. We appreciate every issue, every pull request, every comment on the forums, Slack channel, GitHub, and every other way you all have contributed.

If you’d like to contribute to Ionic 2, we would love your help! Please see our contributing documentation for some of the ways you can contribute.

  • http://www.julianstock.de/ Julian

    Nice, keep up the great work!

  • http://www.kwd.co.in Sagar Mahajan

    Can we use Ionic 2 for production for small projects right now? Tentatively when Ionic 2 stable version can be expected, You people are really doing great job. Awaiting for Sliding tabs now.

    • danbucholtz

      We are targeting an RC release mid-June. As far as choosing Ionic 1 or 2, I personally would use 2 because A) it’s much faster, B) Typescript!, and C) It’s easier to use, but it comes down to the timeline of the project and the willingness to cope with any potential API changes. In the event of an API change, we will always provide instructions to make upgrading easy, but there is some work involved. You really can’t go wrong either way IMO.

      • k3x

        Is it really much faster? Where i can find some beenchmarks of ionic 1 vs ionic 2?
        Thanks

        • danbucholtz

          Ionic 2 is basically a thin wrapper around Angular 2 right now, so it will see all of the speed improvements that Angular 2 brings to the table. I don’t have the numbers handy, but Brad Green from Google has discussed some very impressive performance numbers. I believe he has mentioned that rendering performance is ~5x better typically, but don’t quote me on that :). We’re working on making things like Web Workers easy to use to get even better performance. Basically, application performance will be much better. Beyond that, developer productivity will be much higher we think due to things like Typescript and improved architecture.

          • k3x

            Learning the new version of JS and TypeScript as we speak to use on Ionic 2 later. Hope SQLite database support is good on Ionic 2 because i will need it heavily on my app.
            Thanks for the explanation.

    • http://ferrisutanto.com Ferri Sutanto

      I use it for production with beta7 ..i dare to take a risk because ionic 2 future is so bright 😀

  • Gustavo

    Hi, to update our setup to this latest beta we just run “npm install -g [email protected]”? thanks!

    • Brandy Carney

      That command updates the CLI. To update to the latest version of the framework you can use “npm install –save [email protected]” in your project folder. Please see the documentation here: http://ionicframework.com/docs/v2/resources/using-npm/ 🙂

      • ghenry22

        I’d suggest adding that update command to the upgrade docs, they cover everything except how to actually update to beta8 🙂

        • Brandy Carney

          Done. Thanks! 🙂

      • Gustavo

        perfect, thank you for the clarification

  • Pat Hartl

    Great work guys! Sad to not see split panes this time around, but I can’t wait! 🙂

  • Young Park

    upgrading now

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

    Definitely a strange rendering bug introduced with this version: my submit button is no longer scrollable into view on this modal page! See just the top of it in iOS and none on Android. Both screens scrolled as far as possible.

    • http://matheo.co Mateo Tibaquirá Palacios

      Indeed, there are some CSS changes that needs sync too or a complete rework depending our custom code.

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

        I have no custom css at all. I followed the update steps in the docs. Did you update the css additionally?

        • http://matheo.co Mateo Tibaquirá Palacios

          Ah, I didn’t see the screenshot before, gotta open an issue to report it 🙂

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

            Way ahead of you, cheers.

  • Matt

    Upgraded quickly and mostly without incident, thanks for the nice documentation!

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

    Guys, there is definitely a problem with your css not taking into account the ion-toolbar height when rendering a modal form.

    http://stackoverflow.com/questions/37746242/ionic-2-beta-8-scrollable-content-area-cutting-off-button-at-bottom

    • http://www.raymondcamdencom/ Raymond Camden

      Did you file a bug report?

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

        I have done just now. Strange thing is that it doesn’t reproduce in the plunkr. This is a modal page with nothing special on it. Very strange.

        https://github.com/driftyco/ionic/issues/6839

  • Bob Myers

    How do I access the value of `prodMode` from within the application if I need to? It doesn’t seem to be exposed on `App`.

  • Christrer

    Having a hard time finding third party library .js file with ionic 2, I’m getting “module not found”. All though I have installed it by typing “npm install progressbar.js”. My home.ts has the correct import statement: “import * as ProgressBar from ‘progressbar.js’;”, and the progressbar.js folder is under node_modules folder.