Tagged: advanced

@ViewChildren vs @ContentChildren

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

Expandable Header in Ionic 2

Creating a Custom Expandable Header Component for Ionic 2

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

Testing in Ionic 2

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

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

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

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

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

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

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

Photo Tilt in Ionic 2

Create an Advanced Photo Tilt Component in Ionic 2

Anybody remember Facebook Paper? It was somewhat of a re-imagining of the current Facebook experience into a more news focused format. Despite being quite well-received, it failed to gain traction and eventually shut down. When Facebook Paper was announced, they introduced this new UI concept that was built into the application: Changing the orientation of […]

Parallax in Ionic 2

High Performance Parallax Animation in Ionic 2

A little while ago, I recreated a parallax header directive that was originally created by Ola Christensson for Ionic 1. It was updated to use the Ionic 2 syntax and structure, but the general approach was basically the same. A listener was set up for the scroll event, and as the content area was scrolled […]