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 […]
Creating Custom Form Input Components with Ionic & Angular
A while ago I wrote a tutorial on building a custom input component for an Ionic application. It used an HTML5 <canvas> and a gesture listener to create a rating/satisfaction input component that looks like this: It was just a bit of a silly/fun component to serve as an example for learning about custom components, […]
Sending Push Notifications with the Phonegap Push Plugin in Capacitor
When it comes to accessing native functionality in Capacitor, we are generally able to use any of the thousands of existing plugins for Cordova. However, whilst most Cordova plugins will work fine without modification in Capacitor, not all of them will. One particularly popular Cordova plugin is Phonegap Plugin Push which allows you to register […]
Publishing a Custom iOS Capacitor Plugin on NPM
Earlier this week, I published a tutorial that described how to use Capacitor to run custom iOS native code in Ionic. We built a Capacitor plugin that allowed us to automatically retrieve the latest photo on the user’s camera roll, resulting in an application that looked like this: In order to achieve this, we just […]
Running Custom Native iOS Code in Ionic with Capacitor
One of the limiting factors of the hybrid application approach is the reliance on a mostly community driven plugin ecosystem to access native functionality with Cordova. Most of the time you can easily find a Cordova plugin that provides the functionality you want. However, sometimes for more niche requirements you may struggle to find an […]
Advanced Guide to the Ionic Framework
Once you’ve got the basics of Ionic down then all you have left to learn is… everything else. It’s hard to clearly define where your time would be best spent once you are past the basics – there’s not much point in slogging through tutorial after tutorial implementing different kinds of components and plugins. Once […]
Username Availability with an Asynchronous Validator in Angular
A little while ago I released an article named Advanced Forms & Validation in Ionic where we discussed the concept of using Validators that Angular provides for validating form fields. These validators come in two flavours: synchronous and asynchronous. Synchronous validators can be used to perform simple synchronous checks like whether a field is empty, […]
The Role of Unit Tests in Ionic
Unit testing is an intimidating task to get started with, and with no prior knowledge of creating automated tests, it can be hard to understand the how and why of unit testing. In this video, I walk through some unit tests I have set up for a real-world application I am working on, and we […]
Setting Up Unit and E2E Tests in Ionic
I’ve written many tutorials on adding automated tests to Ionic applications, but one of the trickiest parts of the whole process is just getting the testing environment configured. If you want to set up unit and end-to-end tests you will need to install Jasmine, Karma, Protractor, and an array of other packages that need to […]
Hybrid App Developers: Don’t Store Your User’s Passwords
I almost titled this post something clickbaity like ‘The one MASSIVE security mistake hybrid developers are making’. It is a big issue, and it is a mistake I see pop up on a weekly basis (and I’m sure it extends outside of the hybrid mobile app development sphere). I don’t want the tone of this […]
Testing Asynchronous Code with FakeAsync in Angular
When creating automated unit tests in Ionic and Angular applications we would typically follow a process like this: Set up the testing environment Run some code Make assertions as to what should have happened This process is also commonly referred to as AAA (Arrange, Act, Assert). I don’t plan to provide an introduction to unit […]
Location Select Page with Google Maps and Ionic
If you want to accept a user supplied location in your application, and you want it to be in any kind of remotely useful format, it could be quite hard to do. You could of course just have a simple text field and allow the user to type the address, but that’s a lot of […]
[VIDEO] @ViewChildren vs @ContentChildren in Ionic
I recently release an article that explored The Difference Between @ViewChildren and @ContentChildren in the context of Ionic, but it is a subtle difference and I wanted to make sure I hit the point home. So, I’ve recorded a video where I discuss the difference in a little more detail and also walk through some […]
Create a Directive to Focus Content in a List with 3D Touch
One thing that I really enjoy doing with Ionic is attempting to implement cool and useful (most of the time) UI elements that I think a lot of people assume you can’t do in Ionic or that you can’t do well. Ionic provides a basic set of components by default, but you can extend that […]
Creating a Custom Expandable Header Component for Ionic 2 & 3
One of my favourite pastimes is trying to implement cool looking user interfaces that people send me in Ionic 2. A little while ago, somebody sent through this example from AirBnB. I set out to build a simple implementation of this, and ended up with a custom component that looks like this: The header height […]
“Live” Coding an Expandable Header Component in Ionic 2 – Part 2
In this two part screencast, I walk through building this user interface in Ionic 2. The end result is a custom header component that expands and shrinks as the user controls, and any elements that no longer fit in the header as it shrinks will fade out. Here’s what it will look like when it’s […]
“Live” Coding an Expandable Header Component in Ionic 2 – Part 1
In this two part screencast, I walk through building this user interface in Ionic 2. The end result is a custom header component that expands and shrinks as the user controls, and any elements that no longer fit in the header as it shrinks will fade out. Here’s what it will look like when it’s […]
E2E (End-to-End) Testing in Ionic 2: Test Driven Development
In the past two tutorials on E2E testing in Ionic, I’ve introduced the concept of End-to-End testing and some ways that you can better structure your E2E tests. If you are new to E2E testing you will likely understand at this point that an End-to-End test can test your application in a way that the […]
E2E (End-to-End) Testing in Ionic 2: Structuring Tests with Page Objects
In the first post in this series I wrote about how to create E2E (End-to-End) tests for Ionic 2 applications. This was a very basic introduction that focused on the general concept and getting a bare bones example up and running. I intend to create a few more tutorials that will go a little more […]
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 […]
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 […]
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) […]
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 […]
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 […]