With the introduction of Ionic 4, we have seen a shift in responsibility for navigation from Ionic itself to whatever the underlying framework being used is. That means that if we are using Angular to build an Ionic application, then we should rely on Angular’s own concepts for navigation (even though it is still technically […]
Styling a Shadow DOM in Ionic 4
Since the release of Ionic 4, many of Ionic’s components now make use of a Shadow DOM. I’ve written about what exactly this means in another article, but the basic idea is that a Shadow DOM provides a component with its own isolated world to operate it – free from interference from the parent document. […]
Anatomy of an Ionic 4 Project
A long time ago I recorded a video that covered the “anatomy” of an Ionic project, and now I have recorded a video in the same style to cover the anatomy of an Ionic 4 and Angular project. An intimidating number of files and folders are generated when you create a new Ionic project – […]
The Ionic 4 Migration Survival Guide
The Ionic Framework 4.0.0 Beta is officially available! Make sure to check out the official documentation, but I’ve also got a whole lot of content for you to check out below as well. Although the alpha has technically been available for some time now for those who wanted to jump on board early, the official […]
Using BehaviorSubject to Handle Asynchronous Loading in Ionic
It is common in Ionic applications (and Angular applications more broadly) to create some kind of service to handle loading data from some source. This might be from a local JSON file, local storage, a remote database, or some other kind of data store. The idea is that the service handles any of the complexities […]
Understanding How Slots are Used in Ionic 4
As you may know by now, the big change in Ionic 4 is that all of Ionic’s components are becoming web components. Since web components are a feature of browsers, and not of specific frameworks, this will allow Ionic to work with any framework or no framework at all. The basic idea behind Ionic’s components […]
Converting Ionic 3 Push/Pop Navigation to Angular Routing in Ionic 4
Most of the changes required for upgrading from Ionic 3 to Ionic 4 are going to be simple find and replace style changes – things like changing <button> to <ion-button> and ionViewDidLoad() to ngOnInit(). Although it will look slightly different, the code that you are using in Ionic 3 will more or less look the […]
Create a PWA with Angular Service Workers in Ionic 4
I have written several articles on the topic of Progressive Web Applications (PWA) in Ionic before, including this one which provides a basic overview of the concept of PWAs and how to create one with Ionic. I would recommend reading that article if you need a little more background on what PWAs and service workers […]
My Method for Upgrading from Ionic 3 to Ionic 4
For a major version upgrade, the transition from Ionic 3 to Ionic 4 is going to be relatively minor. Most of your code will be able to remain as is, with some minor syntax changes due to the upgrade to Angular 6 and the web component approach in Ionic 4. However, this doesn’t mean that […]
Custom SVG Icons in Ionic with Ionicons
Like the rest of Ionic in Ionic 4, Ionicons has recently received the web components treatment. If you’ve used Ionic in the past, then you have likely used Ionicons which provides all of Ionic’s icons. Adding a range of well-designed and platform consistent icons is as simple as dropping the following into your project: Ionicons […]
A Primer on CSS 4 Variables for Ionic 4
Apparently, good things come in 4’s (sorry, that was the best I could do). Another significant addition to Ionic 4 is going to be support for CSS4 variables, which will now play the primary role in Ionic’s theming approach. In this article, we are going to take a brief look at what CSS4 variables are […]
Adding Icons & Splash Screens (Launch Images) to Capacitor Projects
Generating icons and splash screen images ends up being a much more difficult task than you might anticipate before doing it for the first time. The difficulty stems from the fact that there are a bunch of different devices that your application could be running on, a lot of which will have different resolutions/pixel density. […]
Faster Boot Times with Lazy Loaded Web Components in Ionic 4
In this article, we are going to take a look at a feature introduced in Ionic 4 that will reduce the initial load times of our applications. Before we get into discussing that, though, I want to highlight that when it comes to performance we can’t just rely on the framework. I published an article […]
Ionic Framework Is Fast (But Your Code Might Not Be)
I don’t want this article to come across as a self-righteous rant, or that I’m attacking people who have made statements like the ones I will use as examples in this article. The last thing I want to do is sound elitist or fan the flames of framework wars. So, I will precede this article […]
Prevent Access to Pages in Ionic with Angular Route Guards
In a previous tutorial, I covered how we would implement Angular routing in an Ionic 4.x application. When Ionic 4 is released, there will be more of a focus on using the baked in Angular routing, rather than Ionic’s own push/pop style routing (this style of navigation will still be available, though). In this tutorial, […]
Using the Capacitor Filesystem API to Store Photos
When we take a photo on an iOS device, the resulting file is stored inside of a temporary folder called tmp. If we use the Camera API to retrieve a photo, the resulting URI will look like this: If we are interested in long-term storage then this isn’t the best solution. The way you approach […]
Implementing a Master Detail Pattern in Ionic 4 with Angular Routing
Earlier this week, I published an article that discussed how and why you should use Angular routing with Ionic 4.x. To summarise, the main points from that article were that: Angular routing primarily relies on defining a bunch of routes that link to specific components/pages, and then using the current URL to determine which route […]
Using Angular Routing with Ionic 4
Recently, I published an article that talked through some of the expected changes for the upcoming Ionic 4.x release. Most of the changes that will be introduced are behind the scenes, and there won’t be that many changes required for updating your Ionic 3.x applications to 4.x. Perhaps the most noticeable change coming in Ionic […]
Create Native HTML5 Games with Phaser and Capacitor
Building HTML5 games with Phaser has been somewhat of a hobby of mine over the past few years, and I’ve even written a few tutorials about Phaser with a focus on developing HTML5 games for mobile. However, despite having created a few mostly finished games most of them never actually see the light of day. […]
Stack Based Navigation (Push/Pop) with Ionic Web Components
The introduction of Stencil and Ionic 4.x has led to a much larger focus on using routes for navigation. In the past, Ionic applications relied mostly on using a navigation stack with a push/pop style of navigation. If you are unfamiliar with how this style of navigation works, I would recommend reading one of my […]
Debugging CSS in Ionic: Tips & Tricks
The browser debugging tools are endlessly useful for helping to build your Ionic applications, and debug any issues you come across. In this article, I am going to discuss a few of the tools and techniques I use to help debug CSS issues in my Ionic application. As well as using these tools to help […]
Building a PWA with Stencil: Storage and Services
Part 1: An Introduction to Stencil Part 2: Project Structure and Syntax Part 3: Rendering Layouts Part 4: Routing and Forms Part 5: Storage and Services (this tutorial) Over the past couple of weeks, we have been working our way through building a Progressive Web Application (PWA) with Ionic web components and Stencil. We have […]
Building a PWA with Stencil: Routing and Forms
Part 1: An Introduction to Stencil Part 2: Project Structure and Syntax Part 3: Rendering Layouts Part 4: Routing and Forms (this tutorial) Throughout this series, we have been building a Progressive Web Application with Ionic and Stencil. We have covered the basics of Stencil and we have started to build out an application with […]
Building a PWA with Stencil: Rendering Layouts
Part 1: An Introduction to Stencil Part 2: Project Structure and Syntax Part 3: Rendering Layout (this tutorial) Part 4: Routing and Forms In Part 3 of this series on building a Progressive Web Application with Ionic and Stencil, we will be finally be getting into the practical side of things. We will generate a […]