• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

If/else In Aurelia Using The “else” Attribute

Aurelia 1 · December 11, 2017

Did you know Aurelia introduced an else attribute a while ago which allows you to do if/else statements in your views complete with support for animation?

If you have been working with Aurelia for more than a few months, then you probably have been working with if/else statements by using multiple if.bind attributes in your HTML or using a terniary inside of string interpolation curlies. But, the else attribute allows us to write cleaner HTML without the need for multiple if statements doing the inverse of one another.

Not only does the else attribute simplify template control syntax, it also supports animation via the Aurelia Animator, thanks to the swap binding parameter added to if you can choose how your else element moves into place with the existing if.

Let’s start with a simple example:

<div if.bind="myCondition">This is truthy</div>
<div else>This is falsy</div>

This is the else attribute in use. It adds an inverse if.bind to your DIV based on the previous condition.

Previously you might have written that like this:

<div if.bind="myCondition">This is truthy</div>
<div if.bind="!myCondition">This is falsy</div>

This isn’t completely horrible, but else is arguably easier to write and look at. You want to avoid bloating your views at all costs. Plus, animating the transition between those two elements would be difficult and not possible with Aurelia out-of-the-box.

If/else with animation:

This is my favourite thing about using if and else together: animation. The if binding supports a binding parameter (we mentioned above) called swap which dictates how the if and else coordinate with one another when animation.

Supported values for swap are:

  • before – Animation is triggered before element is removed
  • with – Animation smoothly syncs up with both elements
  • after Animation is triggered after if condition

One thing you need to keep in mind is you need to add au-animate to the element that has the else attribute. The example below showcases how you can use swap with if and else to animate the change.

<div if="condition.bind: myCondition; swap: with">Truthy :)</div>
<div else class="au-animate">Falsy :(</div>

If you want to change the animation mode, just replace with in the above example with any of the valid options.

Caveats

You might be tempted to try different combinations of if and else but the else attribute is intentionally limited. There aren’t too many caveats, just a couple you need to be aware of to avoid frustration.

  • You cannot chain else attributes ie. Multiple else statements.
  • The else attribute cannot be used with if on the same line. This will not work: else if.bind="condition"
  • The element containing the else attribute needs to come after the element with if

Dwayne

Leave a Reply Cancel reply

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Matt
Matt
2 years ago

I believe `Truthy :)` should be `Truthy :)`. See: https://github.com/aurelia/templating-resources/blob/master/src/if.ts#L14

0
Matt
Matt
2 years ago

My last comment didn’t parse correctly. swap: with should be swap-order: with.

0

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • How To Paginate An Array In Javascript

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz