Displaying Upload/Download Progress in an Ionic Application

Displaying Upload/Download Progress in an Ionic Application

A good experience in a mobile application rests heavily on good communication. You communicate your intent to the application, and it communicates back to you. The better you and the application communicate, the better the experience will be. Uploading and downloading files is an operation that can take some time, so it is important that we get the communication right when this is happening. If you purchase an item online, the experience generally feels better when the seller… continue reading.

Creating & Using a Headless CMS with an Ionic Application

Creating & Using a Headless CMS with an Ionic Application

A Content Management System (CMS) provides an easy way to store and manage data related to content that you want to display. Popular Content Management Systems include the likes of Wordpress , Drupal , Magento and many more. One of the main benefits of a CMS is that it allows you to manage content without having to worry about the code - once the website or application is built you can typically manage everything through some kind of administration interface rather than… continue reading.

Adding JWT Authentication to an Ionic Application with MongoDB and NestJS

Adding JWT Authentication to an Ionic Application with MongoDB and NestJS

Many Ionic applications will require the concept of an authenticated user who is authorised to perform certain actions - perhaps only authenticated users may access your application at all, or perhaps you want to restrict certain types of functionality in your application to certain types of users. There are many different options that can be used to add this functionality to your application, including services like Firebase and Auth0 which do most of the heavy lifting… continue reading.

Using MongoDB with Ionic and NestJS

Using MongoDB with Ionic and NestJS

In the previous few NestJS tutorials we have been discussing how to set up a basic REST API that we can interact with using an Ionic application. We have covered making both GET and POST requests to the backend, but so far we have just been using dummy data and placeholder code - our API doesn’t really do anything yet. In this tutorial, we will be covering how to integrate MongoDB into a NestJS backend and how to use that to add and retrieve records from an Ionic… continue reading.

Adding Sound Effects to an Ionic Application

Adding Sound Effects to an Ionic Application

In this tutorial, we are going to cover how we can add sound effects to our Ionic applications. This particular example is going to cover adding a “click” sound effect that is triggered when switching between tabs, but we will be creating a service that can be used generally to play many different sound effects in whatever situation you would like. I wrote a tutorial on this subject a while ago, but I wanted to publish a new tutorial for a couple of reasons: It was a long… continue reading.

Creating an Achievement Unlocked Animation with Angular Animations in Ionic

Creating an Achievement Unlocked Animation with Angular Animations in Ionic

I’ve written a few articles in the past that covered using the Angular Animations API in an Ionic application. You can find some of those articles below: The Web Animations API in Ionic Add to Cart Animation Animating from the Void: Enter and Exit Animations in Ionic Most of the tutorials that I have created so far focus on reasonably simple animations, but the Angular Animations API is powerful and can handle much more complicated animations. In this tutorial, we will be… continue reading.

Migrating to the Upgraded Ionic Tabs Components

Migrating to the Upgraded Ionic Tabs Components

In this tutorial, we are going to be walking through how to migrate your existing Ionic 4 applications that use tabs to the new tabs components that were introduced in beta.15 . We will go through a simple example of converting the old tabs components to the new ones, and we will also discuss the general ideas behind the changes. It is uncommon to see breaking changes introduced throughout the beta period, but in this case it seems to be something that has been highly sought… continue reading.

Create a Custom Modal Page Transition Animation in Ionic

Create a Custom Modal Page Transition Animation in Ionic

When we launch a modal in an Ionic application, an animation is used to provide a smooth transition as it appears on the screen. The default animation for iOS and Android causes the modal to slide up from the bottom – the effect is more pronounced on iOS, but the animation is similar on both platforms. This animation is perfectly suited to the platforms it runs on and most people will just stick with the default animation (there is no specific reason not to). However, it is… continue reading.

An Introduction to HTTP Requests & Fetching Data in Ionic

An Introduction to HTTP Requests & Fetching Data in Ionic

HTTP requests allow us to request resources that our application can make use of. In the context of this article, this will generally mean requesting data from some API over the Internet, or loading data from a JSON file over the local network. These are HTTP requests that we are going to be launching manually through our code. However, HTTP requests are also used to load other resources in our applications like images or CSS files. If you open up the debugging window, go to… continue reading.

Multi-File Upload with Ionic & Angular (Client-Side)

Multi-File Upload with Ionic & Angular (Client-Side)

I’ve been building out some software recently that involves uploading a bunch of files at once to a server, so I figured it would be worthwhile to share the solution I ended up with in this blog post. The solution is based around using the ng2-file-upload package , but we will be building that into a custom component so that we can easily drop all of the bits-and-bobs we need into the application in a single line of code. The end result will look like this: The custom… continue reading.

Sending Data with POST Requests to a NestJS Backend

Sending Data with POST Requests to a NestJS Backend

In the previous tutorial, we focused on making a GET request from an Ionic application to a NestJS backend. A GET request is generally pretty simple, as all we are doing is making a generic request to a specific URL which will then return a response. In this tutorial, we are going to cover how we can send data from our Ionic application to the NestJS backend by using a POST request. Unlike a GET request, a POST request allows us to send a data payload along with the… continue reading.

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.