The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

You thought the grid was great? This isn’t even our final form.

Why hello you amazing people, we’ve got some exciting updates and news to share from the front lines of Ionic development.

Ionic 2.2.0, the best Ionic yet ?

Keeping the momentum going, we’re happy to announce that Ionic 2.2.0 is out. This includes some bug fixes, as well as two key features:

  • Split Pane component
  • Update to Angular 2.4.8 support

Now one of these features is a lot cooler than the other…so let’s go over the Split Pane.

Split Pane for responsive apps

One of the most requested features when we started working on Ionic 2.x was split pane, or adding the ability to create two views on larger screen sizes. Now this was available in Ionic 1.x as expose-aside-when, but was heavily tied to the ion-side-menu. This made it really limited in terms of functionality. With Split Pane in 2.x, we’ve rethought how this should be done to be ‘automatic’ enough, but also not limit developers to Menus.

Now if you want to add a Split Pane to your app, it’s as simple as wrapping your root component.

<ion-split-pane>
  <ion-menu [content]="myNav"></ion-menu>
  <ion-nav #myNav main><ion-nav>
</ion-split-pane>

In this example we’re using a Menu, but this could be anything.

The only requirement for Split Pane is that a component has an attribute of main.

The main attribute is just a way for Split Pane to know what is going to be the “main” content, and what element is going to be the “side” content.

Other than that, the Split Pane “just works”!

split-pane-2

By default the Split Pane will be hidden until the viewport reaches the md breakpoint, which is (min-width: 768px).
This can be customized by setting the [when] property.

<ion-split-pane when="xl">
  <ion-menu [content]="myNav"></ion-menu>
  <ion-nav #myNav main><ion-nav>
</ion-split-pane>

There are multiple built-in breakpoints that can be set, so be sure to check out the Split Pane documentation to read more.

Nav-inception

While just showing and hiding content on the side is cool, we can take this a step further and add nested navigation to the side content.
If you’ve ever used iOS’s mail app on an iPad, this is quite familiar.

split-pane-nav

Each component has its own ion-nav and can navigate independently from one another. This nesting of navigations allow for much more complex and sophisticated apps to be created, and is something we’re very excited about.

What’s next

The Split Pane is a major step forward into creating new apps that can feel at home on larger devices like tablets and traditional desktops.
We’re super excited about it and can’t wait to see what kind of apps you can build with it!

So what’s next? So much more! We have a lot more in the works in terms of desktop support, so be sure to stay tuned.

Also make sure to take a look at our Desktop development guide for tips on scaling your app to work on large displays.

  • http://northseestudios.com 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!!!

  • 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!

    • http://nicholls.azurewebsites.net/ 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 = [
      MyApp,
      CardsPage,
      ContentPage,
      LoginPage,
      MapPage,
      SignupPage,
      TabsPage,
      TutorialPage,
      WelcomePage,
      ListMasterPage,
      ItemDetailPage,
      ItemCreatePage,
      MenuPage,
      SettingsPage,
      SearchPage
      ];

      export function declarations() {
      return pages;
      }

      export function entryComponents() {
      return pages;
      }

      export function providers() {
      return [

      User,
      Api,
      Items,

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

      @NgModule({
      declarations: declarations(),
      imports: [
      IonicModule.forRoot(MyApp),
      TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
      }),
      IonicStorageModule.forRoot()
      ],
      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.

  • http://rodrigocarvalho.blog.br/ 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.

      • http://rodrigocarvalho.blog.br/ Rodrigo Carvalho

        OK. Thanks for your attention.

  • Rick Li

    Awesome !!!!!

  • Thava Rajan

    That was awesome

  • G.J Anagnostopoulos

    Awesome news!

  • http://nicholls.azurewebsites.net/ 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’ }
          ]
          ]

          https://ionicframework.com/docs/v2/api/navigation/DeepLinker/

          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. 🙁

  • http://www.nextflow.in.th/ 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!!! 🙂

  • http://fazu.eu/ fazu

    good job!

  • Hicham Al Sayed Ahmad

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

  • http://workoutanywhere.net 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!!!

  • https://marslan.me/ 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

  • http://mwager.de 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

  • http://www.esanet.tk NDank Sa

    wow…great news,,awesome,,,

  • Young Park

    Awesome, now my app supports Split Pane as well.

    https://OneVer.se 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

    Cool!!

  • Ajith Kumar
  • Tomer Ben David

    You just made my morning!

  • Charles Muzonzini

    This is awesome!

  • Calvin Odira

    Awesome!

  • http://netify.co.za/ James

    Awesome!!!

  • rozumny

    love you guys!

  • http://www.phonegappro.com Sundara Vel

    Crazy Guys

  • Nick

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

  • alemat1

    GREAT !!

  • Bill Tatsis

    brilliant!

  • Dhaveed Harforlahbee

    wow…..i’ve been anticipating 😀

  • http://www.javascripttuts.com Matthieu Drula

    Thanks guys!

  • http://www.joelpiccoli.com.br Joel Piccoli da Rosa

    Amazing new feature! Ionic getting better everyday! o/

  • http://www.gregorgonzalez.com.ve/ Gregor Gonzalez

    YES! this is why I love Ionic.
    Gracias 😀

  • http://paulopires.me 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

  • http://www.javascripttuts.com 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 ?

  • http://tbergeron.com/ 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!

  • https://mx.linkedin.com/in/isaacperaza 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

    Hi,
    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.