Ionic 4.3 Lithium Out Now!

“I’m so happy because today 4.3 is out”

We got a 🔥 release today with fantastic updates to the Toast component as well as some much-desired bug fixes. Let’s dig in.

Lithium is the lightest metal and has many uses, like lubrication, medication, pyrotechnics, and electronics. The metal is so soft that it can be cut with a knife. Lithium does not typically occur in nature but comes from other Ionic compounds 🤓.

New Features

There are so many great updates to the Toast component we wanted to dub this release “Lithium Toast.”

Toast Buttons

Toasts show subtle messages to the user, usually in response to feedback or as notifications, and typically go away on their own after a short time. Previously, however, you couldn’t do a whole lot with toasts but display some info and let the user dismiss it. In 4.3, you can now set buttons to add additional functionality to toasts.

The buttons can show text or an icon, have a side property that determines if they show at the start or end of the toast, and a handler that takes a function for custom logic.

Here is the sample code for the above:

async showToast() {
  const toast = await this.toastController.create({
    header: 'API Error',
    message: 'Error saving data.',
    buttons: [
      { icon: 'close', side: 'start' },
      {
        text: 'Retry?',
        side: 'end',
        handler: () => {
          toast.message = 'Retrying...';
          // remove the retry button
          toast.buttons.splice(1, 1);
          // simulate a retry
          setTimeout(() => {
            toast.message = 'Success!';
            toast.duration = 1500;
            // dismiss the toast in 2s
            setTimeout(toast.dismiss, 2000);
          }, 1000);
          // returning false so the toast doesn't dismiss
          return false;
        }
      }
    ]
  });
  await toast.present();
}

Toast Headers

Toast messages can now have headers as well.

In the above example, we specify a header as well as the toast message:

Thanks to Zach Keeton and Simon Hänisch for their contributions to this.

For more info, see Toast usage in the docs.

Bug Fixes

The slider component received some nice animation improvements and fixes in this release as well. We exposed animation events that can be passed in through the slide options to provide custom animations when swiping through the swiper component. See the Slides documentation for more details.

Angular devs will also be happy to know that the issue where the back button navigated back to the wrong tab has been fixed. Check out this PR for more details.

Some important bug fixes in this release surround datetime, and input label design. Check out the full release notes for a list of all the fixes.

Happy building! 💙