Category: Ionic Tutorials

Tutorials on the Ionic Framework.

Angular Tutorials | Ionic Tutorials | NestJS Tutorials

Adding JWT Authentication to an Ionic Application with MongoDB and NestJS

Josh Morony · December 13, 2018

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

Angular Tutorials | Ionic Tutorials | NestJS Tutorials

Using MongoDB with Ionic and NestJS

Josh Morony · December 6, 2018

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

Angular Tutorials | Ionic Tutorials

Adding Sound Effects to an Ionic Application

Josh Morony · November 22, 2018

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

Angular Tutorials | Ionic Tutorials

Creating an Achievement Unlocked Animation with Angular Animations in Ionic

Josh Morony · November 15, 2018

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

Angular Tutorials | Ionic Tutorials

Migrating to the Upgraded Ionic Tabs Components

Josh Morony · November 8, 2018

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

Angular Tutorials | Ionic Tutorials

Create a Custom Modal Page Transition Animation in Ionic

Josh Morony · November 1, 2018

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

Angular Tutorials | Ionic Tutorials

An Introduction to HTTP Requests & Fetching Data in Ionic

Josh Morony · October 25, 2018

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

Angular Tutorials | Ionic Tutorials

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

Josh Morony · October 18, 2018

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

Angular Tutorials | Ionic Tutorials | NestJS Tutorials

Sending Data with POST Requests to a NestJS Backend

Josh Morony · October 10, 2018

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

Angular Tutorials | Ionic Tutorials

Building a Notepad Application from Scratch with Ionic

Josh Morony · October 3, 2018

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

Angular Tutorials | Ionic Tutorials

Reordering List Items with Ionic Web Components

Josh Morony · October 1, 2018

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

Angular Tutorials | Ionic Tutorials

Live Coding a Party Game with Ionic – Part 2

Josh Morony · September 27, 2018

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

Ionic Tutorials | NestJS Tutorials

Using Providers and HTTP Requests in a NestJS Backend

Josh Morony · September 26, 2018

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

Angular Tutorials | Ionic Tutorials

Dynamic/Infinite Input Fields in an Ionic Application

Josh Morony · September 19, 2018

Angular has fantastic support for forms, from the simple ngModel to the more robust reactive forms that make use of FormControl and FormGroup. Using ngModel 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 […]

Angular Tutorials | Ionic Tutorials

Live Coding a Party Game with Ionic – Part 1

Josh Morony · September 17, 2018

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

Angular Tutorials | Ionic Tutorials

Twitter Style Heart/Like Animation with Angular Animations in Ionic

Josh Morony · September 6, 2018

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

Ionic Tutorials | NestJS Tutorials

An Introduction to NestJS for Ionic Developers

Josh Morony · September 4, 2018

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

Angular Tutorials | Ionic Tutorials

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

Josh Morony · September 3, 2018

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

Angular Tutorials | Ionic Tutorials

Capacitor Workflow in an Ionic Application

Josh Morony · August 27, 2018

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

Angular Tutorials | Ionic Tutorials | PWA Tutorials

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

Josh Morony · August 22, 2018

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 Access-Control-Allow-Origin 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 […]

Angular Tutorials | Ionic Tutorials

Navigation Basics & Passing Data Between Pages in Ionic & Angular

Josh Morony · August 20, 2018

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

Angular Tutorials | Ionic Tutorials

Production/Development Environment Variables in Ionic & Angular

Josh Morony · August 15, 2018

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

Angular Tutorials | Ionic Tutorials

Styling a Shadow DOM in Ionic 4

Josh Morony · August 16, 2018

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

Angular Tutorials | Ionic Tutorials

Anatomy of an Ionic 4 Project

Josh Morony · August 18, 2018

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