Ionic Tutorials

Hero image for article
Icon for article
intermediateionic2uiuxvideo

Create a Menu with Active Page Highlight in Ionic 2

1 min read

In this video tutorial, we will build some functionality that will allow us to highlight the currently selected menu option.

Hero image for article
Icon for article
beginnerionic2uiuxvideo

An Overview of the Grid Component in Ionic 2

1 min read

In this video tutorial, I walk through the basics of how to use the Grid component in Ionic 2.

Hero image for article
Icon for article
componentintermediateionic2uiux

Build a Simple Progress Bar Component in Ionic 2 & 3

5 min read

In this tutorial, we are going to build a custom progress bar component that we can use in an Ionic 2 application.

Hero image for article
Icon for article
intermediateionic2uiux

Automatic Profile Pictures with Gravatar in Ionic 2

3 min read

In this tutorial, I am going to show how you can integrate Gravatar into the signup process in an Ionic 2 application.

Hero image for article
Icon for article
intermediateionic2uiux

Create a Stylish News Feed Layout in Ionic 2 & 3

6 min read

In this tutorial, we are going to walk through an example of building a stylish news feed layout in Ionic 2.

Hero image for article
Icon for article
beginnerionic2video

A Simple Guide to Saving Data in Ionic 2

1 min read

In order to persist data throughout different sessions, there are multiple different methods we can use, but one simple way to do this is to use the built-in Storage service that Ionic 2 provides.

Hero image for article
Icon for article
beginnerionic2video

Passing Data Between Pages in Ionic 2

1 min read

In this tutorial, we look at several different methods for sharing data between pages in Ionic 2.

Hero image for article
Icon for article
advancedionic2performanceuiux

Create a News Feed with 360-Degree Photo Viewing in Ionic 2 & 3

5 min read

In this tutorial, we will build a news feed layout in Ionic 2 which includes support for viewing panorama photos by tilting the device.

Hero image for article
Icon for article
beginnerionic2video

Loading Remote JSON Data with HTTP in Ionic

7 min read

In this video tutorial, I walk through how to use the Http service to make a `get` request to load some JSON data.

Hero image for article
Icon for article
beginnerionic2

Creating a Time Tracking App in 3 Hours and 57 Minutes

8 min read

In this tutorial, I'm going to step through building the time tracking application I built with Ionic 2.

Hero image for article
Icon for article
intermediateionic2uiux

Improve Mobile Form UX with Input Masks

7 min read

In this tutorial, we are going to go through an example of how we can use input masking in Ionic 2 to provide a better user experience.

Hero image for article
Icon for article
beginnerionic2video

Custom Components in Ionic 2

1 min read

In this video tutorial, we will walk through a very simple example of building a custom component in Ionic 2.

Hero image for article
Icon for article
beginnerionic2video

Custom Pipes in Ionic 2

1 min read

In this video tutorial we are going to build a pipe that will convert seconds, into an hours-minutes-seconds format.

Hero image for article
Icon for article
intermediateionic2uiux

Creating a Music Player Interface in Ionic 2 & 3

7 min read

In this tutorial, we will be building a custom music player interface in Ionic 2, with a focus on creating a visually pleasing design.

Hero image for article
Icon for article
advancedbackendionic2mongodbnosqlscalability

Dynamically Loading Markers with MongoDB in Ionic 2 – Part 1

6 min read

In this tutorial series, we are going to cover how to dynamically load markers from a server and add them to a Google Map in Ionic 2.

Hero image for article
Icon for article
advancedbackendionic2mongodbnosqlscalability

Dynamically Loading Markers with MongoDB in Ionic 2 – Part 2

5 min read

In this tutorial series, we are going to cover how to dynamically load markers from a server and add them to a Google Map in Ionic 2.

Hero image for article
Icon for article
ionic2video

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

1 min read

In this video tutorial, I walk through a simple of example of when it would make sense to create a provider in Ionic 2 and how to do it.

Hero image for article
Icon for article
beginnerionic2uivideo

Using Semantic CSS Styling in Ionic 2

1 min read

In this video tutorial, I walk through a semantic approach to creating styling in Ionic 2. This style relies more heavily on using the semantic structure of the template to apply styles.

Hero image for article
Icon for article
intermediateionic2ui

Build a Tap to Reveal Component in Ionic 2 & 3

3 min read

In this tutorial we are going to walk through how to build a simple tap to reveal component in Ionic 2.

Hero image for article
Icon for article
intermediateionic2

An Overview of the Ionic 2 Build Process

4 min read

In this tutorial, I will give a broad overview of the build process in Ionic 2.

Hero image for article
Icon for article
beginnerionic2video

How to Install 3rd Party Libraries in Ionic 2

1 min read

There are some specific steps you will need to take in order to get most libraries working in Ionic 2, in this tutorial, I walk through a couple examples.

Hero image for article
Icon for article
intermediateionic2video

An Introduction to NgModule for Ionic 2

1 min read

In this video tutorial, I explain the theory behind modules and I cover what you need to know in order to correctly add your own dependencies to the app.module.ts file.

Hero image for article
Icon for article
authenticationintermediateionic2

Implementing Google Plus Sign-In with OAuth 2.0 in Ionic 2

5 min read

In this tutorial, we are going to walk through how to set up basic OAuth 2.0 authentication with Google in an Ionic 2 application

Hero image for article
Icon for article
intermediateionic2video

Using Gestures & Uncommon Event Bindings in Ionic 2

1 min read

In this video tutorial, we cover how to create event bindings other than the usual (click) event binding in Ionic 2.

Hero image for article
Icon for article
beginnerionic2video

An Introduction to Structural Directives: *ngIf & *ngFor

5 min read

In this video tutorial, we cover the concept of using structural directives like *ngIf, *ngFor, and *ngSwitchCase in Ionic 2.