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

  • North McCormick

    You’re all amazing I can’t wait to get my hands on this!

  • Daniel Marc Ehrhardt

    With the new Split Panel Electron Apps with Ionic are Awesome!!!

    • Higor Rosa

      Do you know some article to getting start with Ionic + Electron?

  • JakeWesorick

    Where is the documentation on the “Nav-inception” stuff?

    • Paulo Mateus
      • Pong Prolearning Preecha

        Love the document is very easy understanding and real time update. Thank

      • JakeWesorick

        Struggling with what is the right way to control the right pane from the navigation in the left one. It doesn’t seem to be documented there.

        • modemlooper

          I dont think you can control a nav or view from another nav. So far it seems its like showing two tabs at the same time with separate navigation. Tabs have a select() but isn’t available with ion-nav

  • Ryan w

    Thank you! a big FYI: as of this release, creating new apps via the CLI using the super template get you a big juicy runtime error right off the bat. The super starter has a bunch of great pull requests and needs love too! thanks!

    • Mike Hartington

      we’ll take a look at that and get it squared away. Thanks!

    • Juan David Nicholls

      +1 to Ionic Super Starter! 😀

    • James Simoes

      Hey @disqus_R1zkLXWaAt:disqus replace your app.module.ts file with this 🙂

      import { NgModule, ErrorHandler } from ‘@angular/core’;
      import { Http } from ‘@angular/http’;
      import { IonicApp, IonicModule, IonicErrorHandler } from ‘ionic-angular’;
      import { Storage,IonicStorageModule } from ‘@ionic/storage’;

      import { MyApp } from ‘./app.component’;

      import { CardsPage } from ‘../pages/cards/cards’;
      import { ContentPage } from ‘../pages/content/content’;
      import { LoginPage } from ‘../pages/login/login’;
      import { MapPage } from ‘../pages/map/map’;
      import { SignupPage } from ‘../pages/signup/signup’;
      import { TabsPage } from ‘../pages/tabs/tabs’;
      import { TutorialPage } from ‘../pages/tutorial/tutorial’;
      import { WelcomePage } from ‘../pages/welcome/welcome’;
      import { ListMasterPage } from ‘../pages/list-master/list-master’;
      import { ItemCreatePage } from ‘../pages/item-create/item-create’;
      import { ItemDetailPage } from ‘../pages/item-detail/item-detail’;
      import { MenuPage } from ‘../pages/menu/menu’;
      import { SettingsPage } from ‘../pages/settings/settings’;
      import { SearchPage } from ‘../pages/search/search’;

      import { User } from ‘../providers/user’;
      import { Api } from ‘../providers/api’;
      import { Settings } from ‘../providers/settings’;
      import { Items } from ‘../mocks/providers/items’;

      import { TranslateModule, TranslateLoader, TranslateStaticLoader } from ‘ng2-translate/ng2-translate’;

      // The translate loader needs to know where to load i18n files
      // in Ionic’s static asset pipeline.
      export function createTranslateLoader(http: Http) {
      return new TranslateStaticLoader(http, ‘./assets/i18n’, ‘.json’);

      export function provideSettings(storage: Storage) {
      * The Settings provider takes a set of default settings for your app.
      * You can add new settings options at any time. Once the settings are saved,
      * these values will not overwrite the saved values (this can be done manually if desired).
      return new Settings(storage, {
      option1: true,
      option2: ‘Ionitron J. Framework’,
      option3: ‘3’,
      option4: ‘Hello’

      * The Pages array lists all of the pages we want to use in our app.
      * We then take these pages and inject them into our NgModule so Angular
      * can find them. As you add and remove pages, make sure to keep this list up to date.
      let pages = [

      export function declarations() {
      return pages;

      export function entryComponents() {
      return pages;

      export function providers() {
      return [


      { provide: Settings, useFactory: provideSettings, deps: [ Storage ] },
      // Keep this to enable Ionic’s runtime error handling during development
      { provide: ErrorHandler, useClass: IonicErrorHandler }

      declarations: declarations(),
      imports: [
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
      bootstrap: [IonicApp],
      entryComponents: entryComponents(),
      providers: providers()
      export class AppModule {}

  • James Simoes

    Thank you Ionic! <3

  • Matt

    I *do* think the grid is great! This is pretty cool too

    • Kévin

      The grid is not only great, it’s actually the best out there by far !

  • Gregor Srdic

    love your work!

  • ukvemsord

    Question: is it only possible to use the side menu for the app root? I tried adding a side menu to a root component of a tab view, so that the split pane is presented only for the content of the tab. The side menu is not shown, but the content of the ion-nav inside the ion-split-pane is shown.

    • ukvemsord

      To answer my own question: I already had a global side menu. Removing that from my app.html made the side menu display.

  • Rodrigo Carvalho

    Nice features! Along with the works on desktop support, have you considered woking on smart tv support?

    • Ben Sperry

      Based on our developer surveys, TV’s are one of the least targeted platforms so we will not be prioritizing that for now.

      • Rodrigo Carvalho

        OK. Thanks for your attention.

  • Rick Li

    Awesome !!!!!

  • Thava Rajan

    That was awesome

  • G.J Anagnostopoulos

    Awesome news!

  • Juan David Nicholls

    Ionic everywhere! Web (Angular 2), Desktop (Electron) and Mobile apps (Hybrid/PWA)! Amazing!! *.*

  • Hugh Hou

    Next: URL navigation on desktop mode! So it is a truly progressive webapp. User can navigate the app via unique URL… And even in Ionic server you refresh your code, it is not back to the home screen again …. That is a pain in workflow.

    • Kévin

      It’s already working man. I use it everyday. Look at deeplinking it can even take parameters and have a default back button route !!!! :))))))

      • Hugh Hou

        deeplinking is working on Ionic2? How?

        • Kévin

          In app.module.ts

          imports: [
          IonicModule.forRoot(MyApp, {}, {
          links: [
          { component: CoachMediaPage, name: ‘CoachMedia’, segment: ‘coach-media’ },
          { component: CoachContactProfilePage, name: ‘CoachContactProfile’, segment: ‘jobseeker/:executedByUpliftId’, defaultHistory: [HomePage, CoachContactsPage] },
          { component: TodoPage, segment: ‘to-do’, name: ‘To-Do’ },
          { component: HomePage, segment: ‘welcome’, name: ‘Home’ },
          { component: CoachContactsPage, segment: ‘jobseekers’, name: ‘Jobseekers’ },
          { component: LoginPage, segment: ‘login’, name: ‘Login’ }

          Enjoy !

        • Kévin

          and check how to use these providers from angular2 to make it work perfectly :)))

          import {Location, LocationStrategy, HashLocationStrategy, APP_BASE_HREF} from ‘@angular/common’;

          Location, {provide: LocationStrategy, useClass: HashLocationStrategy},
          {provide: APP_BASE_HREF, useValue : ‘/’ }

      • Adam Fanello

        It’s only shallow-linking. It can’t handle two parameters. 🙁

  • Teerasej Jiraphatchandej

    Split pane is perfect for universal app that fits tablet and smartphone, Thank you! it’s great work!

  • Eduardo Gomes

    It seems to be amazing! Starting tests and development as soon as possible! Thank you so much!

  • Christian Bonato

    Yay! This means I can move over to Ionic 2! You guys rock. Bring in service workers, and we’ll have the best PWA framework around. Bravo bravo bravo.

    • Fikayo Adepoju

      They already have service workers integrated into the framework

      • Christian Bonato

        Doh! Thanks, I’m going to check this out.

  • Md. Zahirul Haque

    Wow! That’s Awesome!!! 🙂

  • fazu

    good job!

  • Hicham Al Sayed Ahmad

    amazing guys , <3 <3 i'm in love

  • Workout Anywhere

    That’s pretty neat!

  • metric152

    oh man. that nav looks fantastic! im not happy with my current ionic 1 nav solution. this would push me to update the front end of my project to v2.

  • Gassan Jabbar

    cool ….
    Thanks guys

  • Nilson Silva

    Amazing!!! This is wonderful!!!

  • Muhammad Arslan

    It’s awesome.

  • gerosan

    I <3 this! I wonder what other form factors and environments are next!

  • Anesu Fitzgerald Muzenda

    This is amazing guys…I’ve always felt a little more comfortable with Ionic’s implementation vs pure Angular2 . This is a great development

  • Michael Wager

    So nice!

  • Travis

    Is there a starter available for this?

  • Sebastian Castaldi

    Congratulations! I can’t wait to use it!

  • Vicente Neto

    Ionic! <3

  • Luchillo17

    Let me complain about database for web, if we want to write one codebase for both mobile and web, SqLite is out of the question, WebSql would only work in Chrome, so would the only option go IndexedDB?

  • David Almeciga

    Genial, me gusta mucho!!!

  • barcafirst

    It’s very awesome. I love it. So i’ll have a lot of job to think all my old app. < 3

  • NDank Sa

    wow…great news,,awesome,,,

  • Young Park

    Awesome, now my app supports Split Pane as well. built in love with Ionic 2

  • Jerry

    Magnificent ty ionic

  • Flex

    Thank you Ionic Team.

  • Giup Toi Aidez Moi

    I do like it ! that’s really cool…

  • Kasinathan Kasi

    Thanks for saving me 🙂 is it possible to reduce the size of side pane?? When i tried its not working properly. can any one guide me. Thanks in advance!!!

  • Rahul OM

    Awesome..I love this Framework.. Thanks Team Ionic

  • Aneri vala


  • Ajith Kumar

    Is there any solution for getting background geo-location from ionic application..? I saw many paid plug-ins.. But I just want to know is anything inbuilt in ionic for background support. if anybody know please inform me. [email protected]

  • Tomer Ben David

    You just made my morning!

  • Charles Muzonzini

    This is awesome!

  • Calvin Odira


  • James


  • rozumny

    love you guys!

  • Sundara Vel

    Crazy Guys

  • Nick

    Wonderful feature… Angular 2.x is full of surprises.

  • alemat1

    GREAT !!

  • Bill Tatsis


  • Dhaveed Harforlahbee

    wow…..i’ve been anticipating 😀

  • Matthieu Drula

    Thanks guys!

  • Joel Piccoli da Rosa

    Amazing new feature! Ionic getting better everyday! o/

  • Gregor Gonzalez

    YES! this is why I love Ionic.
    Gracias 😀

  • Paulo Pires

    When you guys are going to update and support the newest TypeScript version?

    • Ben Sperry

      @paulohenriquepires:disqus Soon! Coming in Ionic 3, we are limited by Angular right now. The Angular compiler in ng 2.x supports old TypeScript. The new one supports the latest version. Stay tuned…

  • Renato Souza

    this it is wonderfull

  • Matthieu Drula

    You were so exited that you made a typo ahah:

    Should be:

  • appeality dev

    Awesome! Thanks for the hard work!

  • 字一日 李白

    any upgrade guidance for ionic 2.0 ?

  • Tommy Bergeron

    Seriously? Seriously? Ionic2 announcements has gave me boners! Supporting my old swift apps is now a burden for me, working with Ionic2 is so freaking fun!

  • Isaac Peraza

    it is an easy change for us. Good Job Ionic Team!!

  • Matthew Boogaard

    Any idea if this will be available in Ionic Creator? @ben_sperry:disqus

  • Chris Cooley

    This is great news!
    Is there anyway to move the tabs to the side menu on larger screen?

  • Wang Shuhao

    Thanks for your work. Split Panel looks great.

    I wonder how do I make the left nav bar as an accordion? Because I need to display different types of pictures in each section, and inside each section I am visioning there are two columns images. Can you give me an idea how to do it?

    Another question is, I want to have a horizontal scrollable panel about 80 pixels. In desktop I have enough estate to locate the panel. But when move to devices like ipad, probably I need to hide the panel and show it only when user tap on some button. Is that possible using ionic components?

    Thank you so much!

  • MOSES Ekwere

    Please can someone help me out with a link where i could learn more on how to use ionic and electron for development?

  • Sanya Cambodia

    Thank you so much. This is what i’ve been waiting for.

  • irsyad syahruddin

    Thank you Ionic! <3

  • yumsquare

    Thank you guys. I can’t describe in words how grateful I am to the work you folks are doing.

  • Everton Santos
  • Olalekan Samuel Bada

    Amazing, Ionic rock!!!

  • Sunil Arora

    Great Stuff!!. A small query, at present, I am limited by Creator capabilities of Buttons/Menu etc, i.e. components in Bottom Left Menu Bar. When can we expect you to enrich the “Components” section. At present, it has basic components only. Thanks, Sunil

  • Jarmo Kukkola

    Looking good. I hope that you get better support for desktop browsers next.

  • Dov

    I don’t know, it’s probably just me, but when switching to @ionic-native/local-notifications it stopped working on Android, didn’t get to check on iOS yet. I haven’t seen anyone with that issue, but maybe someone has some idea… I’m going to switch back to 2.1 unfortunately

  • Vineet Belani

    yeah is there a starter template for this?

  • Billy Gerhard

    There are no sample apps that I can see that are posted yet with this, and there isn’t a sample on the components doc, which there usually is. Can you post the sample app that you used to create the motion screen shot as a reference?

  • Jorge

    How can I push pages from side to the main content? Thanks!

  • Xinhu Liu

    Does Ionic support desktop browsers now? I can’t find any information about desktop browser support…

  • Jean


  • Sagiv Frankel

    Just tried this out – totally awesome and useful!

  • A351

    Hi, can I use ion-split-pane wtih Angular’s router-outlet, instead of ion-nav?