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