Aurelia supports the <slot> element provided via the HTML Web Components specification, which allows you to define placeholders in your HTML that can be replaced. A lot of examples around seem to wrap a slot with a DIV, perhaps a class. The issue with this approach is if you have a styled DIV wrapping a …
Javascript
Get Root $index Value From Within Nested Aurelia Repeaters
Recently in an Aurelia project, I was working with nested repeaters (3 levels deep). The problem was I needed to get the $index from the top level repeater (so, level one). Instinctively, I presumed that you could do this: $parent.$parent.$parent.$index This does not work. The $parent variable only extends to the parent and cannot be …
Aurelia Routing + Switching Root Using setRoot
In your Aurelia applications, you might have two or more roots defining different entry points into your application. I personally create a public facing root which has public routes and an auth protected shell which has routes for logged in users only. Let’s say for this example you have two roots: publicRoot and privateRoot. Your …
Module ES2015 and TypeScript 2.4 Dynamic Imports
Introduced in TypeScript 2.4 is support for the ECMAScript dynamic imports feature. If you didn’t see the announcement or read it properly, you’re probably here because you’re getting the following error. In my case I use Webpack and I was trying to add in some dynamic import goodness and getting this error: Dynamic import cannot …
Auth Protected Routes in Aurelia With Firebase
sing both Aurelia and firebase together is exceptionally convenient for my workflow. When it comes to authentication, I have certain routes I want to protect. The best way to add in authentication checks for routes in Aurelia is to create a router pipeline step. Specifically, an authorise pipeline step. Because of the way Firebase uses …
Aurelia Dynamic Compose + Webpack = Module ID Not Found
If you’re using the latest and greatest Webpack plugin for Aurelia, there is a possibility if you use the <compose> element to dynamically render UI you will run into an issue where Webpack doesn’t know about the dynamic imports. Specifically, I am talking about usage of <compose> that might look like the following: <template> <compose …
Aurelia Dynamic Views From Strings Using InlineViewStrategy
The flexibility of Aurelia means there are many ways to achieve a task. The default convention of view/view-model will meet your needs a lot of the time, but sometimes you might need a little more power. You might already know of the ability to define views inline (inside of your view-models) using the inlineView decorator, …
Efficiently Looping A Javascript Array Backwards
Most of the time when you’re looping over an array of elements, you’ll do it sequentially. However, I recently needed to iterate through an array of objects in reverse just using a plain old for loop. This will not be a highly informative or groundbreaking post but, I thought I’d share this in case someone …
Configuring Git Pre Commit Hook And TSLint (automatically)
If you’re a TypeScript user and you’re reading this, then you’re using TSLint (most likely). Recently, a situation at work arose where even though TSLint warnings were being thrown in the editor as well as terminal output, some developers (tsk tsk) were still committing these warnings. Naturally, a pre-commit Git hook is the right candidate …
Static Inject vs @inject In Aurelia
A few people have actually asked me this question, so I thought a helpful blog post for reference would finally answer the question: What’s the difference between static inject and @inject in Aurelia? The answer will surprise you. Okay, not really. It’s a pretty clear-cut answer. There is no difference between either. Back in the …
