Category: Ionic Tutorials

Tutorials on the Ionic Framework.

Angular Tutorials | Ionic Tutorials

Dynamic/Infinite Input Fields in an Ionic Application

Josh Morony · September 19, 2018

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

Angular Tutorials | Ionic Tutorials

Live Coding a Party Game with Ionic – Part 1

Josh Morony · September 17, 2018

In this video, I walk through building a “party game” using Ionic live on screen. With these types of videos, the emphasis is on dealing with issues as they arise and trying to capture how I would naturally build an application rather than having anything prepared beforehand. All I have going into this video is […]

Angular Tutorials | Ionic Tutorials

Twitter Style Heart/Like Animation with Angular Animations in Ionic

Josh Morony · September 6, 2018

In this tutorial, we are going to work on building an animated “like” button that will look like this when clicked: Since Ionic provides both a “full” and “empty” heart icon: It is easy enough to create an “on/off” or “liked/unliked” state for a like button that uses these icons – you would just use […]

Ionic Tutorials | NestJS Tutorials

An Introduction to NestJS for Ionic Developers

Josh Morony · September 4, 2018

Creating a backend for your application has typically required a totally different skill set to what you might use for the front end. Over time, those lines have blurred as the likes of NodeJS and server-side JavaScript have risen in popularity. Now, with NestJS, you might not even feel like you are working on a […]

Angular Tutorials | Ionic Tutorials

When to Use Services/Providers/Injectables in Ionic & Angular

Josh Morony · September 3, 2018

Services, which we might also refer to as providers or injectables, are a commonly used pattern in Ionic/Angular development. Services allow us to: Make methods/data available to multiple pages/components throughout our application Perform complex logic or interface with external APIs/Services Share a single instance of the service throughout the application, allowing for communication between pages/components […]

Angular Tutorials | Ionic Tutorials

Capacitor Workflow in an Ionic Application

Josh Morony · August 27, 2018

Capacitor was built as an alternative to Cordova, and although much is similar in terms of its methodology, the workflow and commands you will use in a Capacitor application will look quite different to Cordova. In this tutorial, we start out with a simple Ionic application and walk through how to integrate Capacitor and how […]

Angular Tutorials | Ionic Tutorials | PWA Tutorials

Dealing with CORS (Cross-Origin Resource Sharing) in Ionic Applications

Josh Morony · August 22, 2018

Almost everybody who is developing Ionic applications will at some point or another run into a fun little error that looks something like this: The Access-Control-Allow-Origin error you see here is the result of the browser’s implementation of CORS (Cross-Origin Resource Sharing). This is an exceedingly common error, but it is also something that is […]

Angular Tutorials | Ionic Tutorials

Navigation Basics & Passing Data Between Pages in Ionic & Angular

Josh Morony · August 20, 2018

With the introduction of Ionic 4, we have seen a shift in responsibility for navigation from Ionic itself to whatever the underlying framework being used is. That means that if we are using Angular to build an Ionic application, then we should rely on Angular’s own concepts for navigation (even though it is still technically […]

Angular Tutorials | Ionic Tutorials

Production/Development Environment Variables in Ionic & Angular

Josh Morony · August 15, 2018

Often, our production environments are quite different to our development environments. Whilst your application is in development you might just want to make requests to a database running locally on your machine. When you are deploying the application to production you would want the requests to be made to the production database that lives on […]

Angular Tutorials | Ionic Tutorials

Styling a Shadow DOM in Ionic 4

Josh Morony · August 16, 2018

Since the release of Ionic 4, many of Ionic’s components now make use of a Shadow DOM. I’ve written about what exactly this means in another article, but the basic idea is that a Shadow DOM provides a component with its own isolated world to operate it – free from interference from the parent document. […]

Angular Tutorials | Ionic Tutorials

Anatomy of an Ionic 4 Project

Josh Morony · August 18, 2018

A long time ago I recorded a video that covered the “anatomy” of an Ionic project, and now I have recorded a video in the same style to cover the anatomy of an Ionic 4 and Angular project. An intimidating number of files and folders are generated when you create a new Ionic project – […]

Ionic Tutorials

Shadow DOM Usage in Ionic Web Components

Josh Morony · July 24, 2018

Beginning with Ionic 4, all of Ionic’s components will be web components. Unlike previous iterations of the framework where the components were built using Angular, the move to web components means Ionic can now be used just about anywhere. One aspect of web components is the ability to define custom HTML elements, which basically means […]

Angular Tutorials | Ionic Tutorials

Creating Custom Form Input Components with Ionic & Angular

Josh Morony · July 19, 2018

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

Angular Tutorials | Ionic Tutorials

Creating a Custom Scroll Vanish Directive with Ionic Web Components

Josh Morony · July 11, 2018

As I was scrolling through Twitter’s PWA (I assume this would be the same in their native application as well), I noticed that when you scroll down on a screen that has a “double toolbar” in the header: The top “toolbar” will animate off of the screen, leaving only the tab bar: This leaves more […]

Angular Tutorials | Ionic Tutorials

The Ionic 4 Migration Survival Guide

Josh Morony · July 26, 2018

The Ionic Framework 4.0.0 Beta is officially available! Make sure to check out the official documentation, but I’ve also got a whole lot of content for you to check out below as well. Although the alpha has technically been available for some time now for those who wanted to jump on board early, the official […]

Angular Tutorials | Ionic Tutorials

Sending Push Notifications with the Phonegap Push Plugin in Capacitor

Josh Morony · July 10, 2018

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

Angular Tutorials | Ionic Tutorials | PWA Tutorials

Augmented Reality in an Ionic/Angular PWA

Josh Morony · June 20, 2018

Recently, I published a tutorial on using ThreeJS with Ionic to embed virtual reality content into a mobile application using WebVR. This tutorial is going to be somewhat similar, we will still be making use of ThreeJS and WebGL, but we will be creating an augmented reality experience in an Ionic/Angular application. If you are […]

Angular Tutorials | Ionic Tutorials

Using BehaviorSubject to Handle Asynchronous Loading in Ionic

Josh Morony · June 18, 2018

It is common in Ionic applications (and Angular applications more broadly) to create some kind of service to handle loading data from some source. This might be from a local JSON file, local storage, a remote database, or some other kind of data store. The idea is that the service handles any of the complexities […]

Angular Tutorials | Ionic Tutorials | StencilJS Tutorials

Understanding How Slots are Used in Ionic 4

Josh Morony · June 13, 2018

As you may know by now, the big change in Ionic 4 is that all of Ionic’s components are becoming web components. Since web components are a feature of browsers, and not of specific frameworks, this will allow Ionic to work with any framework or no framework at all. The basic idea behind Ionic’s components […]

Angular Tutorials | Ionic Tutorials

Converting Ionic 3 Push/Pop Navigation to Angular Routing in Ionic 4

Josh Morony · July 26, 2018

Most of the changes required for upgrading from Ionic 3 to Ionic 4 are going to be simple find and replace style changes – things like changing <button> to <ion-button> and ionViewDidLoad() to ngOnInit(). Although it will look slightly different, the code that you are using in Ionic 3 will more or less look the […]

Angular Tutorials | Ionic Tutorials

Creating a WebVR Experience in an Ionic/Angular Application

Josh Morony · June 7, 2018

I’ve become absolutely fascinated with WebVR recently. The fact that you can access an immersive virtual reality experience powered by a web browser on your mobile phone just blows my mind. I picked up a Google Pixel 2 XL and a Google Daydream headset to experience and develop for WebVR, which provides a nice and […]

Angular Tutorials | Ionic Tutorials

Creating a Theme Switcher Service in Ionic Using CSS4 Variables

Josh Morony · July 26, 2018

A couple of weeks ago I released an article about how CSS4 variables would be used in Ionic 4. In that article, I discussed how using CSS4 variables for theming allows you to modify these variables at runtime because unlike SASS variables which need to be compiled, CSS4 variables are supported natively by the browser. […]

Angular Tutorials | Ionic Tutorials | PWA Tutorials

Create a PWA with Angular Service Workers in Ionic 4

Josh Morony · July 26, 2018

I have written several articles on the topic of Progressive Web Applications (PWA) in Ionic before, including this one which provides a basic overview of the concept of PWAs and how to create one with Ionic. I would recommend reading that article if you need a little more background on what PWAs and service workers […]

Angular Tutorials | Ionic Tutorials

My Method for Upgrading from Ionic 3 to Ionic 4

Josh Morony · July 26, 2018

For a major version upgrade, the transition from Ionic 3 to Ionic 4 is going to be relatively minor. Most of your code will be able to remain as is, with some minor syntax changes due to the upgrade to Angular 6 and the web component approach in Ionic 4. However, this doesn’t mean that […]

Page 1 of 1312 3 4 5...10...»Last »