WebCake WebCake

Web Development by Colin J Lacy


Enter your email address to receive notifications of new posts by email.

Category: Angular

Moving from Ionic to React Native: A Retrospective


These days, it’s rare to find someone who would argue that Ionic is the best way to build a mobile app. I, like many people, use Ionic for PoC work. It’s a good solution for quick builds. And in the case of a recent project, it was a good solution to get something on my …Read More

Posted: December 27, 2018

Dynamic View Model with @ngrx/store


In pushing out a new release of one of the frameworks we use in my office, I had an idea that I started exploring at home. Its previous release was built on AngularJS 1.5 using the UI-Router, and we had put in a lot of work to abstract-out data calls in the UI-Router resolve properties …Read More

Posted: July 6, 2017

Exploring Resolved Data in the Angular 2 Router


If you’ve use UI-Router, there’s a really good chance you’re familiar with resolves. The folks on my team know I’m personally a huge fan, and I was glad to see that the new router in Angular 2 allow us to make use of them. Unfortunately, at least at the time of this writing, there’s very …Read More

Posted: July 25, 2016

Automating Your Main Nav in a Modular Angular 2 App


If you spend a lot of time on the front-end, you’re probably going to build a lot of navs. Main navs, sub navs, internal navs – all the navs. Not sure about you, but every time I build a nav I usually think to myself “I should really automate this.” Until today, I never had. …Read More

Posted: July 19, 2016

User-Selected Style Themes in an Ionic 2 Application


Earlier this week a conversation about theme selection in Ionic 2 applications came up. For example, if you’re using a game and want the change the colors based on where the user might be in the game. Or, in the app I’m working on at the office, where the user needs to be able to …Read More

Posted: July 2, 2016

Using Firebase 3 in Angular 2 and Ionic 2


Not too long ago I wrote a post about getting Firebase installed in your Ionic 2 app. Well, last week Google had their I/O conference, which debuted the next major release of Firebase, v3, which comes with some significant changes. In this post, I’ll go through the same topics I covered in the first one, …Read More

Posted: May 27, 2016

A Spinner Component Using View Encapsulation in Angular 2


A few weeks ago I wrote a post about how to create an inline spinner for your templates based on a loading state. While that’s still a viable solution, I ended up being my own devil’s advocate and building an alternative that I actually disagreed with at the time, and now find it to be …Read More

Posted: May 14, 2016

Listening for Pause and Resume Events in Ionic 2


When my Ionic 2 app went into beta, I learned a lot about app usage that I think I might have taken for granted over the years. One of the biggest facepalm moments came when one user told me that when she opened the app every morning, it would always show yesterday’s data and not …Read More

Posted: April 30, 2016

Using Firebase 2 in an Ionic 2 Application


This post is based on Firebase 2. About a week after writing it, Google announced Firebase 3. I’ve since written another post that explains how to use Firebase 3 instead. In this article I’ll show how I was able to get Firebase integrated into my Ionic 2 application. This was a great way to stand …Read More

Posted: April 21, 2016

A Loading Spinner in Angular 2 Using ngSwitch


One of the challenges of Angular 1.x template rendering was the possibility of a digest cycle attempting to process an object property when an object was not yet defined. This would inherently throw an error, and would break Angular. There were probably a lot of solutions to this, but for me a simple ng-if attribute …Read More

Posted: April 16, 2016

Looping Over Maps and Sets in Angular 2’s ngFor


I’ve been finding myself using Maps and Sets quite a bit lately. This is becoming especially true when I traverse through an array, or array of arrays, reducing it down to a set of unique, or key-value pairs. As a result, I recently had to write a Pipe similar to one that I previously wrote …Read More

Posted: March 31, 2016

Exploring Nav Hierarchy in the Ionic 2 Tabs Page


Recently I added a login workflow to my Ionic 2 app, where the user has to log in before they can take any other action. If the user is already logged in when they open the app, they’re automatically redirected to the main view. In this case, the main view is the TabsPage layout. This …Read More

Posted: March 17, 2016

Looping Over Object Properties in Angular 2’s ngFor


One of the challenges I noticed while working in Ionic 2 with a Firebase backend was that Angular 2 has a bit of a gripe with iterating over object properties by way of ngFor. At least at the time of this post, there’s nothing in the documentation on how to do it. I’ve seen a …Read More

Posted: February 23, 2016

Add PouchDB to an Ionic 2 app via Webpack


This post is now irrelevant, as the Ionic team replaced Webpack with Browserfy in their Beta 4 release. However, if you’re customizing to use Webpack, feel free to read on. In this post I’ll walk through how I got PouchDB working as part of the Webpack compilation process in an Ionic 2 project. There are …Read More

Posted: February 14, 2016

Let’s Build a Ticker in Ionic 2


I have a buddy who’s pretty bad at keeping track of his diet, and I’m pretty sure I know why. His wife showed me the 8.5″x5.5″ 7pt. font print-out of their weekly diet plan, complete with 4mm-wide checkboxes, and I had the immediate urge to help them out with a super-simple app that accomplished the …Read More

Posted: January 13, 2016

Binding Data to Toggles and Checkboxes in Ionic 2


At the time of this writing, the Ionic 2 docs don’t give much insight into how we can bind data to their ion-checkbox and ion-toggle components. So, I thought I’d go ahead and put up a code example of how I was able to get it working. This demo will load data through an HTTP …Read More

Posted: December 31, 2015

Page Lifecycle Hooks in Ionic 2


The v1 docs on the Ionic site specifically tell us that when we navigate between views, our view isn’t destroyed or removed from the DOM. Instead, it’s cached. If we have page load events that we need to trigger when a user navigates to a page, we’ll need to either handle it with an event …Read More

Posted: December 30, 2015

First Thoughts on Ionic 2


If you’re familiar with Angular 1.x, you’ve probably at least stumbled across Ionic at one point or another. It’s an amazing framework that creates hybrid cross-platform apps out of Angular 1.x projects, adding custom directives specifically built for touch-screen UI. With Angular 2 in beta, it would only make sense that those of us who …Read More

Posted: December 29, 2015

On Declaring Styles Inside Components


This post is about what I feel is a problem in the way some developers on the front-end are writing their components – whether in React, Polymer, or now Angular 2. Please feel free to disagree with me in the comments section, as I’d like to know if I’m missing something. A Widely Agreed-Upon Worst …Read More

Posted: December 22, 2015