StencilJS is the technology behind the most recent version of the Ionic Framework, which allows Ionic’s components to be used with any framework or with no framework at all (opposed to the situation before where it was tied specifically to Angular). The reason StencilJS can be used to achieve this is that it provides a simplified way to build web components which are just native to the web, rather than to a specific framework. You don’t need to use StencilJS in order to use… continue reading.

I decided to write this article in response to some common questions/statements/responses I’ve been seeing for quite a while. In discussions where the cross-platform capabilities of Ionic are being explained, it would be common for the Ionic team, or bloggers/educators like myself, to say that Ionic allows you to build the following applications from a single codebase: Web/PWA Native iOS Native Android etc. It seems to be a point of contention to refer to an Ionic application… continue reading.

In this tutorial, we are going to tackle the basics of using NgRx for state management in an Ionic/Angular application. If you are unfamiliar with the general concept of State Management/Redux/NgRx I would recommend watching this video: What is Redux? as a bit of a primer. The video is centered around Redux , but since NgRx is inspired by Redux the concepts are mostly the same. NgRx is basically an Angular version of Redux that makes use of RxJS and our good friends… continue reading.

A StencilJS application, like many modern applications including those built with Angular or React, consists of a “tree” of components (in the case of StencilJS, this is a tree of web components ). We start with our root component that is added to the index.html file (the entry point for the application), then our root component will add additional components to its template, and then those components will add additional components to their templates and so on. If we were… continue reading.

When building StencilJS applications (whether you are using Ionic with it or not) you will be using JSX to create the templates for your components. JSX is a syntax extension to standard ECMAScript (JavaScript) that adds additional XML style syntax. It was created by Facebook and popularised by its usage in the React framework, but JSX can be used outside of React - which is obviously the case for StencilJS. In over-simplified terms, JSX allows you to mix HTML with… continue reading.

With a little bit of research, you will quickly discover that the Ionic Framework is a framework for building cross-platform applications using web technology. What might be less obvious is exactly what it is that Ionic provides, and what using Ionic might look like for you. This is especially the case today. The current generation of Ionic has opened the door for Ionic to be used in a myriad of different circumstances and in conjunction with different frameworks. This is… continue reading.

When we are building applications, there are many instances where we want data updates from the server to display immediately . Perhaps we have a chat application and we want to display new messages to a user, or maybe we’ve built a game that needs to display an update to the user as soon as something happens on the server. The problem with a typical client/server set up is that we would trigger a request from the client to load some data from a server when the application… continue reading.

Recently, someone asked me if it is possible to create a shared element transition in an Ionic application. I wasn’t actually familiar with that specific term, but it is something I’ve wanted to try building in Ionic for a while and it’s actually a little bit easier than I thought it would be. The basic idea is that rather than just transitioning directly to a new page, we take one of the items on the existing page and animate that into its position on the new page. This… continue reading.

In this tutorial, we are going to take a look at creating a directive that will allow us to apply a cool little enter/exit animation to items inside of an Ionic list. We will be able to define a simple CSS class to determine what the animated styles should look like, which might end up looking something like this: NOTE: The actual end result is smoother than the GIF above looks In this case, we are modifying the of the list items and applying a as they enter or exit the… continue reading.

There have been some reasonably big changes to tab-based navigation in Ionic, and one issue that I see pop up quite a lot is creating more complex navigation within individual tabs. Specifically, a lot of people seem to be running into an issue where after navigating to another page inside of a tab, the tab bar will disappear. In this tutorial, we will be looking at how to create a multi-level master/detail style navigation pattern inside of a tabs layout. This will allow… continue reading.

In previous tutorials, we have covered how to data to a NestJS server, but when it comes to uploading files to a NestJS (or any) server, things get just a little bit tricker. In this tutorial, we are going to walk through setting up a controller in NestJS that can handle receiving file uploads from a front-end application. I will also give a basic example of how to upload from the client-side as well (e.g. sending the files from an Ionic application) to actually make use… continue reading.

I’ve been writing quite a few tutorials on NestJS recently, but an important step in creating a backend for your application is actually hosting it somewhere. During development you can have your NestJS server running over , but when you are ready to launch your application that server will (usually) need to be accessible to everybody (not just your local machine). There are many different ways you could go about hosting a NestJS server - you could host it anywhere you are… continue reading.

In this tutorial, we are going to look into how we can use SASS (which is built into Ionic/Angular applications by default) to create a cool gradient effect on our Ionic lists. It will look something like this: The basic idea is that we choose a base colour, and then that colour will be transitioned dynamically across each list item. This effect can be applied to more than just lists too, you could use it in pretty much any situation where you have a parent element with… continue reading.

A good experience in a mobile application rests heavily on good communication. You communicate your intent to the application, and it communicates back to you. The better you and the application communicate, the better the experience will be. Uploading and downloading files is an operation that can take some time, so it is important that we get the communication right when this is happening. If you purchase an item online, the experience generally feels better when the seller… continue reading.

A Content Management System (CMS) provides an easy way to store and manage data related to content that you want to display. Popular Content Management Systems include the likes of Wordpress , Drupal , Magento and many more. One of the main benefits of a CMS is that it allows you to manage content without having to worry about the code - once the website or application is built you can typically manage everything through some kind of administration interface rather than… continue reading.

Many Ionic applications will require the concept of an authenticated user who is authorised to perform certain actions - perhaps only authenticated users may access your application at all, or perhaps you want to restrict certain types of functionality in your application to certain types of users. There are many different options that can be used to add this functionality to your application, including services like Firebase and Auth0 which do most of the heavy lifting… continue reading.

In the previous few NestJS tutorials we have been discussing how to set up a basic REST API that we can interact with using an Ionic application. We have covered making both GET and POST requests to the backend, but so far we have just been using dummy data and placeholder code - our API doesn’t really do anything yet. In this tutorial, we will be covering how to integrate MongoDB into a NestJS backend and how to use that to add and retrieve records from an Ionic… continue reading.

In this tutorial, we are going to cover how we can add sound effects to our Ionic applications. This particular example is going to cover adding a “click” sound effect that is triggered when switching between tabs, but we will be creating a service that can be used generally to play many different sound effects in whatever situation you would like. I wrote a tutorial on this subject a while ago, but I wanted to publish a new tutorial for a couple of reasons: It was a long… continue reading.

I’ve written a few articles in the past that covered using the Angular Animations API in an Ionic application. You can find some of those articles below: The Web Animations API in Ionic Add to Cart Animation Animating from the Void: Enter and Exit Animations in Ionic Most of the tutorials that I have created so far focus on reasonably simple animations, but the Angular Animations API is powerful and can handle much more complicated animations. In this tutorial, we will be… continue reading.

In this tutorial, we are going to be walking through how to migrate your existing Ionic 4 applications that use tabs to the new tabs components that were introduced in beta.15 . We will go through a simple example of converting the old tabs components to the new ones, and we will also discuss the general ideas behind the changes. It is uncommon to see breaking changes introduced throughout the beta period, but in this case it seems to be something that has been highly sought… continue reading.