Structural Directives in Ionic 2

An Introduction to Structural Directives: *ngIf & *ngFor

In this video tutorial, we cover the concept of using structural directives like *ngIf, *ngFor, and *ngSwitchCase in Ionic 2. Structural directives are an Angular concept, but we will be discussing them in the context of an Ionic application. In short, a structural directive allows us to add or remove content to our applications based […]

Testing in Ionic 2

Test Driven Development in Ionic 2: Navigation and Spies

In the previous tutorial in this series, we covered the concept of mocks and creating a fake backend that we could make HTTP requests to. The general idea is that we want to isolate the thing we are testing, we don’t want external dependencies complicating our unit tests. We have been taking a Test Driven […]

NgModule in Ionic 2

An Introduction to NgModule for Ionic 2

We all use it, it’s a critical part of our applications structure, but I think a lot of people are confused by what exactly it is and what it does. I’m talking about the @NgModule in the app.module.ts file in an Ionic 2 application. In short, using modules allows us to organise our application into […]

Adding libraries in Ionic 2

How to Install 3rd Party Libraries in Ionic 2

Ionic 2 allows you to do a wide range of things right out of the box, but there is likely going to come a time where you need to install some 3rd party library to add additional functionality into your applications. You may want to add Google Maps, add a charting library, add support for […]

Before & After

Build a Tap to Reveal Component in Ionic 2 & 3

In this tutorial, we are going to walk through how to build a simple tap to reveal component in Ionic 2. The concept is quite straightforward, we will build a component that has two possible content area: a before, and an after. The before content will be displayed initially, and the after content will be […]

Testing in Ionic 2

Test Driven Development in Ionic 2: Http and Mocks

In the previous tutorial in this series, we introduced the concept of Test Driven Development and how those concepts can be applied to Ionic 2 development. I won’t be introducing the concepts again here, but in short: Test Driven Development, or TDD, is a method of development that involves writing tests before writing your application […]

Ionic 2 Build Process

An Overview of the Ionic 2 Build Process

I was browsing through the analytics for this website when I saw that someone had arrived on one of my articles by searching for: “why does Ionic have a node modules folder?”. The answer to that is simple enough, that’s where most of the dependencies for the application are stored (like the Ionic library itself, […]

Providers in Ionic

How, Why, and When to Use Providers in Ionic 2

Providers allow you to create a self-contained service that provides some kind of functionality to your application. The role of a provider might include things like fetching data from a server, performing operations on data, sharing data, providing a set of complicated mathematical operations, and so on. In general, we use providers to do the […]

Semantic CSS Styling

Using Semantic CSS Styling in Ionic 2

When creating styles with CSS it is common to attach .classes and #ids to DOM elements so that we can reference them in the CSS file. We can also just use element names directly to apply styles, and there are many more selectors we can use. In this video tutorial, I walk through a semantic […]

Testing in Ionic 2

Test Driven Development in Ionic 2: An Introduction to TDD

The concept of creating automated tests for your application allows you to improve the quality of your code, protect against regressions when making updates, and speed up the testing and debugging process. There are many different types of tests you can add to your applications, including: Unit tests which test small isolated chunks of code […]

Cordova Plugins in Ionic 2

An Explanation of Cordova Plugins for Ionic 2

One of the downsides of creating a web based mobile application is that you don’t have access to all of the device functionality that a native application does, and you can’t submit your application to app stores. Cordova solves this problem. Cordova is commonly used to wrap a web-based mobile application inside of a native […]

Music Player Interface in Ionic 2

Creating a Music Player Interface in Ionic 2 & 3

In this tutorial, we will be building a custom music player interface in Ionic 2, with a focus on creating a visually pleasing design. The interface will include the following features: Track list with alternating row styles Track progress bar Information for currently playing track Styling and animation for currently playing track Next track and […]

Google Maps in Ionic 2

Getting Started with Google Maps in Ionic 2

Google Maps is one of the most used features in a mobile application, and my tutorials on Google Maps have consistently been the most popular on the site. My previous video on using Google Maps in Ionic 2 was created a long time ago, and is now outdated. So, I wanted to put together another […]

Testing in Ionic 2

Introduction to Testing Ionic 2 Applications with TestBed

Creating automated tests for your application is a great way to improve the quality of your code, protect against code breaking regressions when implementing new features, and speed up testing and debugging. In a Javascript environment, the Jasmine framework is typically used for writing tests and Karma is used to run them. This is still […]

Pipes in Ionic 2

Custom Pipes in Ionic 2

Pipes are a convenient way to modify data before displaying it to users in templates. You can think of them as a pipe in a literal sense. You can push data through this pipe, something happens to it inside of the pipe, and when the data comes out the other end it looks different – […]

Ionic Package

Building Ionic 2 Applications for iOS without a Mac

When it comes to building iOS applications on a Windows machine, it’s not an easy process. It feels like Apple is fighting you every step of the way, but it is possible. In fact, when I first got into mobile development I did this for about 2 years. An Ionic 2 application is built with […]

Custom Components in Ionic 2

Custom Components in Ionic 2

The Ionic 2 library provides a wide range of default components – likes lists, segments, and cards – that can easily be added to your applications, but sometimes it is useful to build your own custom components. Building your own custom component isn’t all that different from building a normal page in Ionic 2 (they […]

Input Masking in Ionic 2

Improve Mobile Form UX with Input Masks

An important concept when designing a user interface with user experience in mind is Cognitive Dimensions. These cognitive dimensions, which were defined in the context of academic papers in 1996, provide a set of concerns to be measured that have an impact on usability. These dimensions, when applied to interface design, include things like making […]

Creating a Time Tracking App in 3 Hours and 57 Minutes

I’m starting a big new project that will span several months, and I want to track exactly how much time I spend working on it. It’s the type of work that gets done in bits and pieces, fitting around other obligations I have, late at night and early in the morning. I’ve done several projects […]