Posts about Ionic 4

Making a Menu Work in Ionic 4

September 6th 2019 Ionic 4

Creating a menu in Ionic 4 should be simple and the process seems to be well documented but I struggled with it longer than I should have. Therefore, I decided to share my findings for my future self and for everyone else who might find this helpful.

View Encapsulation After the Ionic 4 Upgrade

August 30th 2019 Ionic 4 Angular

Angular supports several different modes of encapsulating styles in components so that styles from one component don't affect elements in other components. By default, Angular uses ViewEncapsulation.Emulated to emulate native Shadow DOM behavior without actually using Shadow DOM. Ionic 4 uses the same default which can cause problems when upgrading applications from Ionic 3 where ViewEncapsulation.None was used.

Swipeback Gesture Configuration in Ionic 4

August 23rd 2019 Ionic 4

Ionic has built-in support for navigating back using the swipe gesture. If you want to disable it for the whole application, you can pass a configuration option to IonicModule. Alternatively, you can disable and re-enable swipeback navigation ar runtime. In Ionic 3, NavController exposed a property for that. In Ionic 4, NavController doesn't provide such a property anymore. Instead, IonRouterOutlet now has an equivalent swipeGesture property.

Dismissing All Loading Overlays in Ionic 4

August 16th 2019 Ionic 4 Async

In Ionic 4, the dismissAll method for closing all currently open loading overlays has been removed. This might not be such a bad idea since it could cause problems when used carelessly. Still, when porting an existing Ionic 3 app to Ionic 4 not having an equivalent for it available can be a problem. I created my own replacement to make porting easier and minimize the required code changes.

Dismiss Loader on Page Change in Ionic 4

August 9th 2019 Ionic 4

In Ionic 3, there was an easy way to automatically dismiss a loading overlay when the navigation to a new page completed - you only had to set the dismissOnPageChange flag when creating the overlay. There's no such flag available in Ionic 4.

Inspecting Angular Apps from Browser Console

July 19th 2019 Angular Ionic 2/3 Ionic 4

Many JavaScript developers are used to inspecting the web page and the state of JavaScript variables using the browser developer tools. The browser console window can even be used for executing arbitrary JavaScript code to affect the web page/application at runtime. However, when using a SPA framework like Angular instead of vanilla JavaScript it's not as easy anymore to access the JavaScript objects of interest such as components and services. Fortunately, Angular provides means to access them, although they aren't documented well.

Returning Results from Alerts in Ionic 4

June 28th 2019 Ionic 4 Async

Last year I wrote a blog post about making code for displaying alerts reusable and testable by wrapping it into a function which returns the user's response as a promise. The sample was written in Ionic 3. The code doesn't work in Ionic 4 without modifications. Since I recently received a request for an Ionic 4 version of the code, I decided to write this follow-up post.

Issues with Initializing a New Ionic 4 Android App

February 22nd 2019 Ionic 4 Cordova Android

The final release of Ionic 4 is a good incentive for migrating existing Ionic 2/3 applications to Ionic 4. The official documentation lists the required steps for creating a new Ionic 4 project and adding Android support to it. If you're using Cordova 8+, then the application will run fine. But if you're still using Cordova 7.1.0, you'll only be greeted by a white screen when the application starts.