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 […]
Migrating to the Upgraded Ionic Tabs Components
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 […]
Create a Custom Modal Page Transition Animation in Ionic
When we launch a modal in an Ionic application, an animation is used to provide a smooth transition as it appears on the screen. The default animation for iOS and Android causes the modal to slide up from the bottom – the effect is more pronounced on iOS, but the animation is similar on both […]
Dynamic/Infinite Input Fields in an Ionic Application
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 […]
Twitter Style Heart/Like Animation with Angular Animations in Ionic
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 […]
Styling a Shadow DOM in Ionic 4
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. […]
Shadow DOM Usage in Ionic Web Components
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 […]
Creating a Custom Scroll Vanish Directive with Ionic Web Components
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 […]
Creating a Theme Switcher Service in Ionic Using CSS4 Variables
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. […]
Custom SVG Icons in Ionic with Ionicons
Like the rest of Ionic in Ionic 4, Ionicons has recently received the web components treatment. If you’ve used Ionic in the past, then you have likely used Ionicons which provides all of Ionic’s icons. Adding a range of well-designed and platform consistent icons is as simple as dropping the following into your project: Ionicons […]
A Primer on CSS 4 Variables for Ionic 4
Apparently, good things come in 4’s (sorry, that was the best I could do). Another significant addition to Ionic 4 is going to be support for CSS4 variables, which will now play the primary role in Ionic’s theming approach. In this article, we are going to take a brief look at what CSS4 variables are […]
Accessing and Adding Styles to the Host Element in Stencil
In the previous tutorial, we rebuilt a component that was originally designed with Angular. However, instead of using Angular to build it we used Stencil instead to create a generic web component that could work anywhere. Since we were no longer using a framework like Angular, we had to make a couple of changes to […]
Using Stencil to Create a Custom Web Component with a Public API Method
Last week, we built a flash message component with Angular. The purpose of this component was to allow for a way to easily make a one-line call from anywhere in the application to display a flash message like this: I think it is interesting to then consider what this same component might look like, and […]
Improving the UI/UX of an Ionic Component
In this tutorial, we are going to improve upon the flash message service that we created in the last tutorial. I offered some suggestions for improving the service at the end of that tutorial which included: Allowing for different messages styles (success, danger, warning, etc.) Displaying a bar to indicate how long the message will […]
Creating a Flash Message Service in Ionic
You will often run into circumstances in your application where you want to send some kind of alert to the user. You might want to let them know that they have lost their Internet connection, or that a post failed to upload, or that a photo has finished successfully uploading. In terms of the built-in […]
Building a Time Locked Advent Calendar in Ionic
As a kid, advent calendars were one of my favourite Christmas traditions. There was something special about ripping open that perforated cardboard each day and eating chocolate first thing in the morning. As an adult, I would prefer one of those whiskey advent calendars, but 24 little bottles of bourbon work out to be quite […]
High Performance Animations in Ionic
It is a common misconception that web-based mobile applications like those built with Ionic are not capable of creating performant animations. The fact that an application built with Ionic runs inside of a browser does make it harder to create performant animations, but if you are aware of some common pitfalls when it comes to […]
Creating a Facebook Style Reaction Button in Ionic
Near the start of 2016, Facebook released “Reactions” which gave users a way to express themselves more deeply than just with a single “Like”. Rather than adding it a bunch of new buttons for the reactions, Facebook stayed with a single “Like” button that would then display more options when the button was held down: […]
Animating from the Void: Enter and Exit Animations in Ionic
Last week I wrote a tutorial that covered how to create a simple add to cart animation using the Angular animations library (which is based on the Web Animations API). To quickly recap, creating animations with the Angular animations library involves creating “triggers” with “states” that define a set of styles and then defining “transitions” […]
Add to Cart with the Web Animations API in Ionic
As well as looking cool, animations are best used in applications when they serve a purpose. Animations are great for conveying a range of concepts (direction, anticipation, emotions) and one particularly useful feature of animations is that they draw the attention of the user. Our eyes are naturally drawn to movement, and so animations are […]
Bulk Delete UI with CSS Clip-Path in Ionic
I was browsing around Twitter the other day when I came across a tweet from Rachel Nabors (who you should definitely follow for cool web animation stuff) linking to this cool CSS clip-path maker. It allows you to switch between a bunch of different pre-defined clip-paths and apply them to an image. The general concept […]
Creating an Accordion List in Ionic
Earlier this week I recorded a video where I walked through building an expandable component on screen. This was a generic component that could be given a specific height, and its state could be toggled between being expanded and collapsed. Due to a dwindling battery, I didn’t get to take the component quite as far […]
Live Coding an Expandable Component in Ionic
I’ve been releasing a series of videos where I walk through building something on screen, with only a vague idea of what I want to build and no planning in advanced. The idea is that it gives a more realistic representation of what the actual development process looks like, rather than having everything pre-planned, working, […]
Designing a Landing Page with a Video Background in Ionic
The initial impression of your application on a user comes from the application’s icon, the splash screen, and then the initial page of the application. Much like judging a book by its cover, by the time the user reaches the landing page for your application they will likely have already formed some strong opinions about […]