Ionic Tutorials | joshmorony - Build Mobile Apps with HTML5

My Method for Upgrading from Ionic 3 to Ionic 4

Josh Morony · May 25, 2018

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 […]

Ionic Tutorials

Custom SVG Icons in Ionic with Ionicons

Josh Morony · May 21, 2018

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 […]

Ionic Tutorials

A Primer on CSS 4 Variables for Ionic 4

Josh Morony · May 16, 2018

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 […]

Ionic Tutorials

Adding Icons & Splash Screens (Launch Images) to Capacitor Projects

Josh Morony · May 14, 2018

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. […]

Angular Tutorials | Ionic Tutorials

Faster Boot Times with Lazy Loaded Web Components in Ionic 4

Josh Morony · May 9, 2018

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 Tutorials

Ionic Framework Is Fast (But Your Code Might Not Be)

Josh Morony · May 8, 2018

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 […]

Ionic Tutorials

Deploying Capacitor Applications to Android (Development & Distribution)

Josh Morony · May 3, 2018

Earlier this week, I released a guide to deploying Capacitor applications to iOS. In this tutorial, we are going to be doing the exact same thing, except we will be deploying an Android application built with Capacitor to Google Play. As was the case for the last tutorial, we are going to do this starting […]

Ionic Tutorials

Deploying Capacitor Applications to iOS (Development & Distribution)

Josh Morony · May 2, 2018

In this tutorial, we are going to walk through how to use Capacitor to deploy iOS applications. We will be covering how to get a Capacitor application running on an iOS device for development, all the way through to creating a build for distribution on the App Store. We are going to do this starting […]

Angular Tutorials | Ionic Tutorials

Creating a Tabs Layout with Angular Routing and Ionic 4

Josh Morony · April 25, 2018

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 […]

Ionic Tutorials

Using Cordova Plugins that Require Install Variables with Capacitor

Josh Morony · April 23, 2018

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 […]

Angular Tutorials | Ionic Tutorials

Prevent Access to Pages in Ionic with Angular Route Guards

Josh Morony · April 18, 2018

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, […]

Angular Tutorials | Ionic Tutorials

Using the Capacitor Filesystem API to Store Photos

Josh Morony · April 16, 2018

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 […]

Angular Tutorials | Ionic Tutorials

Implementing a Master Detail Pattern in Ionic 4 with Angular Routing

Josh Morony · April 11, 2018

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 […]

Angular Tutorials | Ionic Tutorials

Using Angular Routing with Ionic 4

Josh Morony · April 9, 2018

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, […]

Ionic Tutorials | PWA Tutorials | StencilJS Tutorials

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

Josh Morony · March 28, 2018

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 […]

Angular Tutorials | Discussion | Ionic Tutorials

What to Expect When Ionic 4 Is Released

Josh Morony · May 1, 2018

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 […]

Angular Tutorials | Ionic Tutorials

Using Google Maps and Geolocation in Ionic with Capacitor

Josh Morony · March 14, 2018

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 […]

Angular Tutorials | Ionic Tutorials

Automatic Scroll to Bottom Chat Interface with Mutation Observers in Ionic

Josh Morony · March 12, 2018

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, […]

Ionic Tutorials

Publishing a Custom iOS Capacitor Plugin on NPM

Josh Morony · May 23, 2018

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 […]

Ionic Tutorials

Running Custom Native iOS Code in Ionic with Capacitor

Josh Morony · March 8, 2018

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 […]

Angular Tutorials | Ionic Tutorials

Improving the UI/UX of an Ionic Component

Josh Morony · February 21, 2018

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 […]

Angular Tutorials | Ionic Tutorials

Creating a Flash Message Service in Ionic

Josh Morony · February 22, 2018

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 Tutorials

Debugging CSS in Ionic: Tips & Tricks

Josh Morony · February 14, 2018

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 […]

Ionic Tutorials | PWA Tutorials | StencilJS Tutorials

Building a PWA with Stencil: Storage and Services

Josh Morony · February 12, 2018

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 […]