TypeScript Errors

How to Fix Common TypeScript Errors in Ionic 2

Early on in the development of Ionic 2, the team decided to fully embrace TypeScript over plain ES6 JavaScript. All Ionic 2 projects use TypeScript by default, and it’s quite difficult to modify the project to be rid of TypeScript. TypeScript is really just JavaScript with some added bonuses, though, so there are not really […]

Sliding Content Drawer in Ionic 2

How to Create a Sliding Drawer Component for Ionic 2

Since I create a lot of content, I often ask for suggestions on tutorials I should write. If I find a suggestion is particularly interesting or I think it will benefit a lot of people, I’ll generally end up creating a tutorial at some point – so do feel free to suggest them. The other […]

Phaser

Anatomy of a Phaser Project

If you’re new to building HTML5 games with Phaser, like with any new language or framework, it can be quite a hurdle just to grasp the structure and the basic idea of how it all works. In this video tutorial, I will walk through the general structure of a Phaser project and the important parts […]

Security in Ionic

Basic Security for Ionic & Cordova Applications

Security is a difficult topic, experts spend their careers learning and researching, and new threats are constantly arising. As new technology comes out, so do new threats. As developers, we may not always be able to do make our applications impervious to attacks, but it’s our responsibility to ensure we at least take some basic […]

Testing in Ionic 2

Test Driven Development in Ionic 2: Services and Templates

Throughout this tutorial series, we have been learning various methods for unit testing Ionic 2 applications and using a Test Driven Development approach to building an application. In the previous tutorials we have covered: How to set up unit testing in an Ionic 2 application What Test Driven Development (TDD) and Behaviour Driven Development (BDD) […]

Ionic and Wordpress

Is Ionic the WordPress of the Mobile App World?

Max Lynch, co-founder and CEO of Ionic, often states that the vision for Ionic is to be like the WordPress for mobile. Take a look at this quote from an appearance Max made on the FlyoverLabs podcast: It’s a vision that makes a lot of sense given the success of WordPress (see point #6), and […]

Using Gestures & Uncommon Event Bindings in Ionic 2

In this video tutorial, we cover how to create event bindings other than the usual (click) event binding in Ionic 2. We will cover how to use gestures like press, swipe, pan, pinch, and rotate, as well as some more uncommon events like keydown and keydown.space. Here’s the video: Video Notes Event bindings like (click) […]

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

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 2

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

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