How to Send Data with POST Requests in Ionic 2

How to Send Data with POST Requests in Ionic 2

In the past, we have covered how to make a simple GET request to load data from a server, and for the most part, making a POST request is pretty much the same. There are a few key differences, though, including the fact that a POST request also includes a body , and there’s also a feature that is built into observables that may trip you up when attempting to make a POST request. In this video tutorial, we walk through a basic example of sending a POST request to a server in… continue reading.

Listening to Events on a Host Element in Ionic 2

Listening to Events on a Host Element in Ionic 2

When creating a custom directive (and in other circumstances) you may be interested in listening for events that are happening on the host element. Let’s say for example that I created a custom directive that I wanted to attach to the component, like this: The host element, which is in this example, may emit events that we want to make use of in our directive. In this video tutorial, we will walk through how you can listen for events on a host element in Ionic 2 (which is… continue reading.

E2E (End-to-End) Testing in Ionic 2: An Introduction

E2E (End-to-End) Testing in Ionic 2: An Introduction

Over the past few weeks, I have been releasing a series of tutorials on creating automated tests for Ionic 2 applications. The tutorials so far have focused on how to apply the Test Driven Development (TDD) methodology to unit test an Ionic 2 application. If the concept of automated tests is new to you, or if you don’t understand why you would want to create automated tests for an application, I would recommend reading through my Test Driven Development series of… continue reading.

CouchDB, PouchDB, and Ionic 2: An Introduction

CouchDB, PouchDB, and Ionic 2: An Introduction

Databases. The creatures that often live somewhere in the cloud and hoard all of the data for your application. Although they can be troublesome to work with, they allow you to turn your isolated application into one that can share and communicate with the world. There are many different options available, and different options are going to make sense for different people and different scenarios, but I’ve spent a long time looking for the one that “felt right” – the one… continue reading.

Increasing Performance with Efficient DOM Writes in Ionic 2

Increasing Performance with Efficient DOM Writes in Ionic 2

I’ve touched on this point many times in the past, so I will only make it briefly now. Ionic and HTML5 mobile applications in general, make it super easy for people to build mobile applications, but it also makes it super easy to build bad applications . It’s not always easy to build good applications with Ionic – anything more than a simple application will require more intimate knowledge of web performance and how Ionic works if you want top notch performance. This is… continue reading.

An Introduction to Observables for Ionic 2

An Introduction to Observables for Ionic 2

Observables are one of those new tricky things you will almost certainly run into at some point when building an application with Ionic 2. They can seem a little weird and overwhelming at first, and you might wonder ” why can’t we just stick to promises? ”, but they are quite beautifully implemented. At a basic level, you don’t need to worry about all of the advanced things observables can do or what “reactive programming” is, you will mostly just need to know a few basics… continue reading.

Building an Absolute Drag Directive in Ionic 2

Building an Absolute Drag Directive in Ionic 2

Recently I sat down to record a screencast of myself building out a new directive in Ionic 2. It was quite a simplistic directive, but the intent was to build it from start to finish with no prior planning involved so that I could show people the types of roadblocks I run into and the problem-solving approach I take when building something. Although most of the videos I create are unscripted, there is at least some level of planning involved and I know more or less what I’m… continue reading.

Reordering a List in Ionic 2

Reordering a List in Ionic 2

It’s super easy to create lists in Ionic 2, and it’s also super easy to allow a user to reorder them. With the addition of a simple attribute, you can turn your normal into a reorderable one. In this video tutorial, I walk through exactly how to create a reorderable list in Ionic 2. Here’s the video : Video Notes Reordering can be added to a standard by adding the attribute and setting it to The list will not automatically remember the position of items after… continue reading.

How to Fix Common TypeScript Errors in Ionic 2

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 many good reasons to not want to use it. TypeScript can be kind of like a tough parental figure or teacher. In the beginning, it may seem like it’s… continue reading.

How to Create a Sliding Drawer Component for 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 day on Twitter, @dylanvdmerwe suggested attempting to make the following UI component for Ionic 2: There is the normal view, and then at the bottom of the screen, there is another view… continue reading.

Anatomy of a Phaser Project

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 of how a Phaser game actually works. Here’s the video : Video Notes Phaser can be a great option to build simple mobile games, it’s not a good fit for resource intensive games with… continue reading.

Automatically Generate Splash Screens and Icons with Ionic CLI

Automatically Generate Splash Screens and Icons with Ionic CLI

When submitting applications to the app stores we need to supply an icon for the application that is used to display the application on the user’s home screen or applications menu, and a splash screen that is displayed when the app launches. That doesn’t sound like too much of a task, but there are a variety of different devices out there with different splash screen and icon sizes, so we need to create a ton of assets to satisfy all of these requirements. It’s quite the task… continue reading.

Basic Security for Ionic & Cordova Applications

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 steps to ensure the security of our applications and the data it holds or transmits, especially when it comes to private user data like passwords… continue reading.

Test Driven Development in Ionic 2: Services and Templates

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) is How to use Jasmine to create unit tests, and Karma to run them How to unit test pages in Ionic 2 How to write tests… continue reading.

Is Ionic the WordPress of the Mobile App World?

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 it made me think about the similarities that exist between WordPress and Ionic today. WordPress and Ionic are two fundamentally different technologies – Ionic is a framework for… continue reading.

Using Gestures & Uncommon Event Bindings in Ionic 2

Using Gestures & Uncommon Event Bindings in Ionic 2

In this video tutorial, we cover how to create event bindings other than the usual event binding in Ionic 2. We will cover how to use gestures like , , , , and , as well as some more uncommon events like and . Here’s the video : Video Notes Event bindings like can be set up on elements in the template to trigger functions in the TypeScript file As well as , gestures like , , , , and can also be used Normal DOM events like and can also be used for event… continue reading.

An Introduction to Structural Directives: *ngIf & *ngFor

An Introduction to Structural Directives: *ngIf & *ngFor

In this video tutorial, we cover the concept of using structural directives like , , and 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 on some condition. We will walk through a few basic examples, and also discuss why we use the weird star syntax for structural directives. Here’s the video : Video… continue reading.

Game Mechanics in Phaser: Simple Helicopter Obstacle Course

Game Mechanics in Phaser: Simple Helicopter Obstacle Course

This will be the first part in a new series I plan on creating for creating HTML5 games with the Phaser framework. We will be focusing on how to create bare-bones versions of common game mechanics with Phaser. The same basic game mechanics can be used to create a multitude of different styles of games. Take puzzle games like Bejeweled or Candy Crush, many of these games use the exact same mechanics (with some differences of course), they just have a different coat of paint… continue reading.

Test Driven Development in Ionic 2: Navigation and Spies

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 Development to developing a simple eCommerce application, which means that we write the tests for our code before we write the code itself. If you are not familiar… continue reading.

An Introduction to NgModule for 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 in the app.module.ts file in an Ionic 2 application. In short, using allows us to organise our application into cohesive blocks of functionality. All applications will have a root module which will define dependencies like the components, directives, pipes, and providers that the application will use… continue reading.