Using Angular Routing with Ionic 4

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 4, and the one that will require the biggest change in your existing applications, is the move to Angular style routing. The typical push/pop style… continue reading.

Create Native HTML5 Games with Phaser and Capacitor

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. I do love the idea of creating games with web tech (I love the idea of creating everything with web tech, really). The recent release of Phaser 3 , and of Capacitor… continue reading.

Stack Based Navigation (Push/Pop) with Ionic Web Components

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 previous tutorials on navigation in Ionic/Angular . This push/pop style of navigation makes a lot of sense for mobile applications. However, since Ionic is… continue reading.

What to Expect When Ionic 4 Is Released

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 impact the actual work you need to do in order to keep building applications with Ionic, or upgrade existing ones. Ionic 4 has not been officially released yet, so please keep in mind that this is… continue reading.

Publishing a Web Component Using Stencil (And Using It Anywhere)

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 used within Angular (unless you are using Angular Elements . Although you can use a web… continue reading.

Creating a Google Maps Web Component with Stencil

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, in this tutorial, we will be recreating the same Google Maps component in Stencil. The main benefit to building a component as a web component with Stencil is that… continue reading.

Using Google Maps and Geolocation in Ionic with Capacitor

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 Maps service, but now I want to look into building a more robust Google Maps component for Ionic/Angular using Capacitor . The Google Maps component that we are… continue reading.

Automatic Scroll to Bottom Chat Interface with Mutation Observers in Ionic

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 , but there is a bit of a trick to it. It’s easy enough to scroll to the bottom of a list in Ionic, in fact, all you need to do is use this method: So, in order to trigger this behaviour, you… continue reading.

Publishing a Custom iOS Capacitor Plugin on NPM

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 made modifications to the local Capacitor project. This is fine, but we may also want to make the plugin a little more modular/portable so that we can reuse it… continue reading.

Running Custom Native iOS Code in Ionic with Capacitor

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 existing plugin that does what you need, or perhaps you can find one but it is no longer maintained. If you don’t know how to take matters… continue reading.

Accessing and Adding Styles to the Host Element in Stencil

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 the component, but it still ended up functioning mostly the same. One feature we did leave out is the animated bar that indicates how long the flash message… continue reading.

Using Stencil to Create a Custom Web Component with a Public API Method

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 how we might use it, if we were to build it with Stencil as a web component rather than as an Angular component. These kinds of direct comparisons help to really… continue reading.

Improving the UI/UX of an Ionic Component

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 be displayed Adding an indicator to communicate that the message can be closed by being tapped We will be adding all of these features to the… continue reading.

Creating a Flash Message Service in Ionic

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 Ionic components, you could use the to fulfill this role. However, it does require a little work to set up the alert, and you may not always want to use that style of overlay… continue reading.

Debugging CSS in Ionic: Tips & Tricks

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 debug, I also often use the browser debugging tools to help design my application as well, as I can quickly see the effect that changes would have. This isn’t going to be a super… continue reading.

Building a PWA with Stencil: Storage and Services

Building a PWA with Stencil: Storage and Services

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 been building a clone of the cryptoPWA application that I built a little while ago using Ionic/Angular. We have mostly finished the main parts of the application, the biggest feature that we have remaining to complete is the ability to save added holdings and fetch the current price for those holdings. In this… continue reading.

An Early Look at Capacitor (A New Native Bridge for Web Apps)

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 well), but for now, it is easiest to think of Capacitor as the Ionic team’s own version of Cordova . Capacitor is not only for Ionic applications. All you need to do to make… continue reading.

Building a PWA with Stencil: Routing and Forms

Building a PWA with Stencil: Routing and Forms

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 it, and so far it looks like this: We just have a single page that has a layout created using Ionic web components. In this tutorial, we are going to add an additional page and set up routing so that the user can navigate to it. We will discuss we can handle navigation using Stencil… continue reading.

Building a PWA with Stencil: Rendering Layouts

Building a PWA with Stencil: Rendering Layouts

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 new application using the Ionic PWA Toolkit , and we will focus on creating the basic layout for our application. The application that we will be building is going to be a clone of the cryptoPWA application that I created a few weeks ago as a PWA using Ionic/Angular. This was also a multi-part… continue reading.

Building a PWA with Stencil: Project Structure and Syntax

Building a PWA with Stencil: Project Structure and Syntax

This article is Part 2 in a new tutorial series on building a Progressive Web Application using Stencil and the new Ionic PWA Toolkit . In the first tutorial , we focused on discussing what exactly Stencil is and how it fits into the Ionic ecosystem: In this tutorial, we are going to start getting a little more practical and examine the structure and syntax of Stencil projects. As I mentioned in the last article, I am introducing Stencil in the context of developers who… continue reading.