Building a Notepad Application from Scratch with Ionic

Building a Notepad Application from Scratch with Ionic

A difficult part of the beginner’s journey to learning Ionic is the step between understanding some of the basics and actually building a fully working application for the first time. Concepts explained in isolation can make sense, but it may be difficult to understand when to use them in the context of building an application. Even after spending some time learning about Ionic, you might find yourself starting a new project with no idea where to begin. The aim of this… continue reading.

Reordering List Items with Ionic Web Components

Reordering List Items with Ionic Web Components

A while ago, I released a video that walked through how to reorder list items in Ionic 3. Now that Ionic 4 has been released, and just about everything has moved over to web components, the way in which we need to reorder list items has changed a little. In this video, we walk through how to use the and components to reorder list items in an Ionic 4 application. Watch the video on YouTube: Click here . continue reading.

Live Coding a Party Game with Ionic – Part 2

Live Coding a Party Game with Ionic – Part 2

In the previous tutorial , we started building an application live on screen that would display a series of questions to the user. So far, we have been able to display some dummy data to cycle through questions and change the background colour for each question. In this tutorial, we will finish the application off by adding some additional styling, loading the questions from an external source, and refactoring/improving the application a little. Watch the video on YouTube… continue reading.

Using Providers and HTTP Requests in a NestJS Backend

Using Providers and HTTP Requests in a NestJS Backend

In the previous tutorial , we covered setting up a simple NestJS server that communicated with an Ionic application. All we have done so far is create a simple controller in NestJS that responded with some dummy message data. At the moment, it looks like this: The purpose of the previous tutorial was to introduce you to the basic structure of a NestJS project and get some simple communication happening between the backend and the front end. In this tutorial, we will be… continue reading.

Dynamic/Infinite Input Fields in an Ionic Application

Dynamic/Infinite Input Fields in an Ionic Application

Angular has fantastic support for forms, from the simple to the more robust reactive forms that make use of and . Using allows us to bind input fields in the template to class members in our TypeScript files. Reactive forms take a similar approach except that we bind our form in the template to a form group defined in the TypeScript file, and our input fields inside of that form to form controls defined in the TypeScript file. Generally, with both of these… continue reading.

Live Coding a Party Game with Ionic – Part 1

Live Coding a Party Game with Ionic – Part 1

In this video, I walk through building a “party game” using Ionic live on screen. With these types of videos, the emphasis is on dealing with issues as they arise and trying to capture how I would naturally build an application rather than having anything prepared beforehand. All I have going into this video is a general idea of what I want to build – all mistakes along the way will be included. This particular application will allow us to display a series of questions on… continue reading.

Twitter Style Heart/Like Animation with Angular Animations in Ionic

Twitter Style Heart/Like Animation with Angular Animations in Ionic

In this tutorial, we are going to work on building an animated “like” button that will look like this when clicked: Since Ionic provides both a “full” and “empty” heart icon: It is easy enough to create an “on/off” or “liked/unliked” state for a like button that uses these icons – you would just use a different icon depending on whether or not the button had been clicked – but, the result is a little more boring than if we put a little more effort into animating it… continue reading.

An Introduction to NestJS for Ionic Developers

An Introduction to NestJS for Ionic Developers

Creating a backend for your application has typically required a totally different skill set to what you might use for the front end. Over time, those lines have blurred as the likes of NodeJS and server-side JavaScript have risen in popularity. Now, with NestJS , you might not even feel like you are working on a backend at all. NestJS is a NodeJS framework for building server-side applications. The major thing that drew me towards NestJS was its similarities to standard… continue reading.

When to Use Services/Providers/Injectables in Ionic & Angular

When to Use Services/Providers/Injectables in Ionic & Angular

Services, which we might also refer to as providers or injectables, are a commonly used pattern in Ionic/Angular development. Services allow us to: Make methods/data available to multiple pages/components throughout our application Perform complex logic or interface with external APIs/Services Share a single instance of the service throughout the application, allowing for communication between pages/components In this video, we discuss the role of services and when you… continue reading.

Capacitor Workflow in an Ionic Application

Capacitor Workflow in an Ionic Application

Capacitor was built as an alternative to Cordova, and although much is similar in terms of its methodology, the workflow and commands you will use in a Capacitor application will look quite different to Cordova. In this tutorial, we start out with a simple Ionic application and walk through how to integrate Capacitor and how to use the basic commands. Although the video is specifically about Ionic, you do not need to use Ionic in order to use Capacitor. If you are using… continue reading.

Dealing with CORS (Cross-Origin Resource Sharing) in Ionic Applications

Dealing with CORS (Cross-Origin Resource Sharing) in Ionic Applications

Almost everybody who is developing Ionic applications will at some point or another run into a fun little error that looks something like this: The error you see here is the result of the browser’s implementation of CORS (Cross-Origin Resource Sharing). This is an exceedingly common error, but it is also something that is also widely misunderstood. This is an issue I’ve seen popping up on forums more and more frequently lately (likely due to people upgrading from UIWebView… continue reading.

Navigation Basics & Passing Data Between Pages in Ionic & Angular

Navigation Basics & Passing Data Between Pages in Ionic & Angular

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 possible to use Ionic’s own component). In this video tutorial, we will cover the basic concepts for navigation when building an Ionic/Angular… continue reading.

Production/Development Environment Variables in Ionic & Angular

Production/Development Environment Variables in Ionic & Angular

Often, our production environments are quite different to our development environments. Whilst your application is in development you might just want to make requests to a database running locally on your machine. When you are deploying the application to production you would want the requests to be made to the production database that lives on a remote server somewhere. Perhaps you have a set of public API keys that you want to use in a development environment and a… continue reading.

Styling a Shadow DOM in Ionic 4

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. The parent document will not be able to override styles of the component, and styles from the component will not leak out into the parent document. This isolation between… continue reading.

Anatomy of an Ionic 4 Project

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 – all the files and folders play some kind of role, but there isn’t that many that you need to actively be concerned about (most of the time). The goal of this video is to explore the project… continue reading.

Shadow DOM Usage in Ionic Web Components

Shadow DOM Usage in Ionic Web Components

Beginning with Ionic 4, all of Ionic’s components will be web components . Unlike previous iterations of the framework where the components were built using Angular, the move to web components means Ionic can now be used just about anywhere . One aspect of web components is the ability to define custom HTML elements, which basically means that the Ionic team can create their own element that the browser will recognise and support as a web component. Another aspect of web… continue reading.

Creating Custom Form Input Components with Ionic & Angular

Creating Custom Form Input Components with Ionic & Angular

A while ago I wrote a tutorial on building a custom input component for an Ionic application. It used an HTML5 and a gesture listener to create a rating/satisfaction input component that looks like this: It was just a bit of a silly/fun component to serve as an example for learning about custom components, using gesture listeners, and interacting with a canvas in an Ionic application. Something like this could legitimately be used as part of a form, or some other custom… continue reading.

Creating a Custom Scroll Vanish Directive with Ionic Web Components

Creating a Custom Scroll Vanish Directive with Ionic Web Components

As I was scrolling through Twitter’s PWA (I assume this would be the same in their native application as well), I noticed that when you scroll down on a screen that has a “double toolbar” in the header: The top “toolbar” will animate off of the screen, leaving only the tab bar: This leaves more screen real estate for viewing the content by removing interface elements that are not immediately needed. The top toolbar will then reappear when the user begins to scroll up again. I… continue reading.

The Ionic 4 Migration Survival Guide

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 beta release is when a lot more people will want to start switching over. The beta release comes with official documentation and guidance from the Ionic team, and it… continue reading.

Sending Push Notifications with the Phonegap Push Plugin in Capacitor

Sending Push Notifications with the Phonegap Push Plugin in Capacitor

When it comes to accessing native functionality in Capacitor , we are generally able to use any of the thousands of existing plugins for Cordova. However, whilst most Cordova plugins will work fine without modification in Capacitor, not all of them will. One particularly popular Cordova plugin is Phonegap Plugin Push which allows you to register for and receive push notifications in your application. Unfortunately, this is one particular case of a plugin that will not… continue reading.