Posts about Ionic 4+

Styled buttons in Ionic date picker

April 1st 2022 Ionic 4+

The new date picker in Ionic 6 brings many improvements, but it can be tricky to style. In a previous blog post, I was asked a question about this. I gave a short answer there, but I decided to expand on it in a separate blog post.

Custom event types in Ionic

February 11th 2022 Ionic 4+ Angular TypeScript

In Ionic 6, component events have well-documented, strongly typed arguments. Unfortunately, the outputs in Angular are still typed as Event. The issue has already been reported and there is even a fix for it, but it did not make it into Ionic 6 as it would involve a breaking change. So until the fix is released, you'll have to settle for one of the workarounds.

Positioning Ionic popovers

February 4th 2022 Ionic 4+

In a recent blog post, I described how to make the date picker in Ionic 6 more similar to the date picker in previous Ionic versions if you put it in a popover. However, the default positioning of the popover is not perfect for all situations. Fortunately, there is a way to adjust the positioning of the popover by taking advantage of CSS shadow parts.

Shadow parts in Ionic

January 14th 2022 Ionic 4+

When components were rewritten as web components in Ionic 4, many of them started using Shadow DOM to isolate their internal markup. This means that components can only be customized as much as the CSS custom properties provided allow. In Ionic 5, many components exposed their internal markup as shadow parts, so it was again possible to fully customize it.

Date picker popup in Ionic 6

January 7th 2022 Ionic 4+

Fortunately, there are not too many breaking changes in Ionic 6. The one that impacted the applications that I had to update to Ionic 6 was the redesign of the date picker. Although it was easy to make the markup compatible with Ionic 6, the new component broke the existing design.

Debugging a Capacitor Ionic application

October 23rd 2020 Capacitor Ionic 4+

Ionic documentation is increasingly recommending Capacitor over Cordova as the native runtime environment for running the applications on mobile devices. While the different approach to handling native source code in Capacitor has its advantages, the debugging experience for the TypeScript part of the applications leaves a lot to be desired.

Content-based Modal Transitions in Ionic

May 15th 2020 Ionic 4+

Although transition animations for modal pages can be customized individually for each instance of a modal page, they still can't easily affect the content of the page that's opening them. The animation factory function only gets access to the modal page that's being opened but not to the originating page.

Using BlurHash in Ionic

May 8th 2020 Ionic 4+

BlurHash is a compact representation for image placeholders developed by Wolt. Implementations are available for many languages. Since TypeScript is one of them, it's easy to use in an Ionic application as well.

Customizing Page Transitions in Ionic 5

May 1st 2020 Ionic 4+

Although Ionic supports custom transitions when navigating between pages, I couldn't find much documentation about it. However, by combining information from different sources I managed to create one and fully understand the code involved.

Scroll-dependent Animation in Ionic

April 24th 2020 Ionic 4+ Angular

In my previous blogpost, I implemented a staggered animation in Ionic Angular where the animation-delay depended only on the position of the item in the list. This time, the delay will depend on the current scroll position of the list. The animation will start in the middle of the screen and move towards the top and bottom edges.

Staggered Animation in Ionic Angular

April 17th 2020 Ionic 4+ Angular

Recently, Josh Morony published an interesting tutorial about staggered animations in Ionic. Since he's using StencilJS, there are some syntax changes required to make his sample code work with Angular. It wasn't as trivial as I expected.

An Overview of Animations in Ionic Apps

April 10th 2020 Ionic 4+

In a highly polished mobile application, there are typically many short transitions and animations. To get you started, Ionic comes with several built-in animations, such as transitions between pages, modal page transitions, reactions to clicks, etc. But sooner or later you'll want to give your application a more unique identity by customizing existing animations and adding additional ones.

Partially Obscured Scrollable Element in Ionic 4

March 20th 2020 Ionic 4+

Recently, we encountered an interesting design challenge in the Ionic application we're developing: have a transparent gradient overlay on top of long scrolling text. I'm sure it's a simple task for an experienced CSS wizard but since it wasn't immediately obvious to us how to do it best, I'm sure that someone else will also benefit from our learnings.

Forcing Reload of Root Page in Ionic 4

February 14th 2020 Ionic 4+ Angular

Angular based routing in Ionic 4 introduces some gotchas if you're used to navigation in Ionic 3. Reinitializing the navigation stack by setting the root to the same page as it was before is one of those gotchas.

Testing Ionic Apps on iOS with Serve

January 31st 2020 Ionic 4+ Windows iOS

The Safari browser has a tendency to render pages differently than Chrome. Troubleshooting such cases in Ionic apps and testing potential fixes can be time consuming, especially when developing on Windows. Building the app on the build server and having it deployed via TestFlight can make the feedback loop really long. I managed to make it shorter by opening the page served from my development machine in the mobile Safari browser.

Mocking Fetch Calls with Jasmine

January 10th 2020 Unit Testing Ionic 4+ Angular

After getting asset loading working in Ionic unit tests, I wanted to also test the error handling in case an asset fails to load. Mocking the fetch call would be the easiest way to do that.

Assets Not Loading in Ionic Unit Tests

December 27th 2019 Ionic 4+ Unit Testing Angular

Recently I had to embed a JSON file as an asset in my Ionic 4 project. When I tried to test the code accessing the asset, I was unpleasantly surprised. The asset failed to load with a 404 error. The body of the response was "NOT FOUND".

Pop Multiple Pages in Ionic 4

December 20th 2019 Ionic 4+

In Ionic 3, navigation was stack based. NavController was used for controlling the navigation stack (i.e. for pushing pages onto the stack and popping them of the stack). Fortunately, there's still a NavController in Ionic 4. It's built on top of Angular routing and makes navigation more similar to how it worked in Ionic 3.

Fix for Ionic 4 Side Menu Freezing

December 13th 2019 Ionic 4+

After upgrading our Ionic application to Ionic 4, testers started reporting that the side menu randomly froze in place when an item inside it was clicked. The problem could only be resolved by restarting the application. We tracked it down to two lines of code but unfortunately we didn't have a reliable way to reproduce the issue and the code seemed perfectly valid.

Convert Custom Ionic 3 Transitions to Ionic 4

November 29th 2019 Ionic 4+ Ionic 2/3

Support for custom transitions between pages in Ionic framework (e.g. when opening a modal page) has never been well documented. Fortunately, there are blog posts for both Ionic 3 and Ionic 4 which provide more information and can serve as a good starting point for creating your own custom transitions. But even with all that, it can be tricky to convert existing custom Ionic 3 transitions to Ionic 4 when upgrading an application.

Customizing Android Back Button in Ionic 4

November 22nd 2019 Ionic 4+ Android

Android hardware back button is something one can easily forget about but must in the end be properly supported in any mobile application. Unfortunately, built-in support in Ionic 4 is less than perfect. Many scenarios are still not properly supported as documented in a GitHub issue which hasn't been resolved for almost a year.

Ionic 4: Pinned Certificates in Output Folder

November 15th 2019 Ionic 4+ Angular

If you want to use certificate pinning in Ionic 4 applications, the Cordova Advanced HTTP plugin is your best option. There's even an Ionic Native wrapper available for it to make it easier to use. In this post I'm focusing on how to put the certificates into the output folder as required by the certificate pinning functionality despite that folder being deleted at the beginning of every build.

Repeating Same Ionic 4 Page in History

November 8th 2019 Ionic 4+ Angular

In Ionic 3, there was no need to pay any attention which pages you navigate to and how. This made it easy to create pages for navigating hierarchical structure, e.g. a catalog. In Ionic 4, the same route can't repeat in the history stack.

Opening Ionic 4 Modals from a Common Service

October 11th 2019 Ionic 4+ TypeScript

In Ionic 4, even for lazy-loaded modal pages the component must be specified using the type. There's nothing wrong with that. Enforcing strong typing is usually a good idea. However, it can potentially cause a circular dependency, especially if you move the code for creating and opening modal pages to a separate service to avoid repeating the same boilerplate code and make testing easier.

Ionic 4 Modals in Lazy-Loaded Modules

October 4th 2019 Ionic 4+

When creating pages using the Ionic CLI, by default each one of them is placed in its own module to enable lazy loading. However, if you want to display such a page as a modal instead of navigating to it, it won't work without some modifications. Although lazy-loaded modal pages are supported in Ionic 4, the documentation isn't all that detailed about it.

NavParams Alternatives in Ionic 4

September 27th 2019 Ionic 4+

Ionic 3 provided a unified way for passing parameters to newly opened pages - the NavParams object. In the target page constructor, it could be used to get any parameters passed to that page. Ionic 4 doesn't have a universal NavParams object anymore, therefore other approaches must be used to achieve the same.

Hyperlinks in Ionic Checkbox Labels

September 20th 2019 Ionic 4+ Ionic 2/3

Including a hyperlink in a checkbox label is a common way to provide more information about the choice the user is making. Unfortunately, in Ionic such a hyperlink doesn't work out of the box because the whole label acts as toggle for the checkbox. There's an easy way to make it work, though.

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.