April 4, 2019
  • Announcements
  • Ionic

Ionic Release: 4.2 Helium!

Ely Lucas

Ionic 4.2 is upon us, and with it, so is our second feature release of Ionic 4! This release is codenamed Helium, after the second element in the periodic table of elements.

Did you know? Helium is the second-most abundant element in the Universe (after hydrogen), making up about 24 percent of the universe’s mass. However, it is relatively rare on Earth. Scientists fear that we might someday run out of helium as it is considered a non-renewable resource. More info.

Ionic 4.2 landed on NPM today with a couple of highly-requested features and some great bug fixes. Let’s dive in and take a look.

New Features

New Error Event for ion-img

An event is now emitted on <ion-img> when an image fails to load. This can be useful to load default images in case the specified image is not found:

  <ion-img src="/assets/goodperson.jpg" (ionError)="loadDefault($event)"></ion-img>
  <ion-img src="/assets/badimage.jpg" (ionError)="loadDefault($event)"></ion-img>

loadDefault(event) {
    event.target.src = '/assets/img/default.png';
}

This feature was a pull request made by community member Ivan Tham. Thanks!

Optional ticks on ion-range

Before, when you specified snaps on <ion-range>, you would get tick marks on the slider bar. Thanks to a contribution from Seth Lilly, you can now specify a ticks boolean attribute to control if they appear or not (defaults to false):

<ion-range min="0" max="20" step="5" snaps="true"></ion-range>
<ion-range min="0" max="20" step="5" snaps="true" ticks="false"></ion-range>

Note that the ticks will only display if snaps is set to true, regardless of the value of ticks.

Bug fixes

There are a few notable bug fixes that are in 4.2.

Activated Route Observable Fixes

There was an issue where the observables on an ActiveatedRoute would only fire the first time the page was loaded. This is now fixed and fire every time the observable changes:

constructor(
  public actionSheetCtrl: ActionSheetController,
  private route: ActivatedRoute,
  private router: Router
) {}

ngOnInit() {
  this.route.queryParams.subscribe(qp => this.qp = qp);
}

DateTime Fixes

Lots of updates went into the DateTime picker this release. Defaulting to the local timezone and having the picker update the days in the month when you select a new month are a couple we think the community will be excited about:

For a full list of bugs fixes with links to issues, see the release notes here.

Special thanks to all our community contributors who helped by filing and fixing issues in this release, we appreciate it!

Whats next? We are heads down focused on bringing first-class desktop support to Ionic. Stay tuned!

Ely Lucas

Related Posts