Recently, I published a tutorial that talked through how to use Angular routing in an Ionic/Angular application when Ionic 4.x is released. Although using Angular style routing is not required if you want to upgrade to Ionic 4, there are a lot of benefits to doing so (and some features that were available with standard […]
Using Cordova Plugins that Require Install Variables with Capacitor
Since Cordova is such a hugely popular framework with a massive ecosystem of plugins to access various native functionality, Capacitor is aiming to have backward compatibility with existing Cordova plugins. This means that if you are using Capacitor, you should be able to use any existing Cordova plugin with it. All you need to do […]
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. Ionic 4 has not officially been released yet, […]
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 […]
What to Expect When Ionic 4 Is Released
The Ionic team has been busy working behind the scenes to finish the release of Ionic 4.x, which we should hopefully see an alpha release of before too long. We’ve talked about the benefits of Ionic 4 in the past. In this article, I want to focus on how the release of Ionic 4 will […]
Publishing a Web Component Using Stencil (And Using It Anywhere)
Over the past couple of weeks we have explored creating custom components within Ionic/Angular, and creating custom web components using Stencil. Although both behave very similarly, the key difference between creating an Angular component, and a Stencil component, is that Stencil generates generic web components that can be used anywhere. Angular components can only be […]
Creating a Google Maps Web Component with Stencil
Last week, we created a custom Google Maps component for an Ionic/Angular application. Since I have also been creating a lot of Stencil content recently, I think it is fun to see how we could build the same components that we build for Ionic/Angular, except as a generic web component with Stencil. To that end, […]
Using Google Maps and Geolocation in Ionic with Capacitor
Google Maps integration is consistently one of the most popular features of mobile applications. I’ve published tutorials on how to use Google Maps with Ionic many times in the past, but I wanted to revisit the basics again now that some time has passed. Previously, I have used Ionic and Cordova to build a Google […]
Automatic Scroll to Bottom Chat Interface with Mutation Observers in Ionic
It is common in chat interfaces to have the latest messages displayed at the bottom of the screen, and for the screen to automatically scroll to the latest message when a new one is added. This is a feature I added to the chat application that is built in the last module of Elite Ionic, […]
Publishing a Custom iOS Capacitor Plugin on NPM
Earlier this week, I published a tutorial that described how to use Capacitor to run custom iOS native code in Ionic. We built a Capacitor plugin that allowed us to automatically retrieve the latest photo on the user’s camera roll, resulting in an application that looked like this: In order to achieve this, we just […]
Running Custom Native iOS Code in Ionic with Capacitor
One of the limiting factors of the hybrid application approach is the reliance on a mostly community driven plugin ecosystem to access native functionality with Cordova. Most of the time you can easily find a Cordova plugin that provides the functionality you want. However, sometimes for more niche requirements you may struggle to find an […]
Accessing and Adding Styles to the Host Element in Stencil
In the previous tutorial, we rebuilt a component that was originally designed with Angular. However, instead of using Angular to build it we used Stencil instead to create a generic web component that could work anywhere. Since we were no longer using a framework like Angular, we had to make a couple of changes to […]
Using Stencil to Create a Custom Web Component with a Public API Method
Last week, we built a flash message component with Angular. The purpose of this component was to allow for a way to easily make a one-line call from anywhere in the application to display a flash message like this: I think it is interesting to then consider what this same component might look like, and […]
Improving the UI/UX of an Ionic Component
In this tutorial, we are going to improve upon the flash message service that we created in the last tutorial. I offered some suggestions for improving the service at the end of that tutorial which included: Allowing for different messages styles (success, danger, warning, etc.) Displaying a bar to indicate how long the message will […]
Creating a Flash Message Service in Ionic
You will often run into circumstances in your application where you want to send some kind of alert to the user. You might want to let them know that they have lost their Internet connection, or that a post failed to upload, or that a photo has finished successfully uploading. In terms of the built-in […]
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 […]
An Early Look at Capacitor (A New Native Bridge for Web Apps)
A short while ago, the Ionic team announced that they were working on a project called “Avocado” which later took on its official moniker of Capacitor. In this article, I want to introduce you to Capacitor and what it will do. I will get into the specifics soon (and we will build an example as […]
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 […]