• 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

Binding with Style in Aurelia

Aurelia 1 Tutorials · February 15, 2016

One of my favourite features of Aurelia is the ability to bind element styles. If you ever worked with Angular 1, then you would know you could bind not only classes but inline styles on an element as well.

Please note:
In all of these examples except String Interpolation, you can use the style attribute, but it is recommended that you use css for Internet Explorer compatibility if you want to use interpolation. I personally just use css for all style binding use-cases, which is an alias for style anyway.

Style binding using objects

Using an object in your ViewModel or defined in your view template, you can bind multiple styles to one or more elements.

Please note: changes to property values in an object will not update in your view as object properties are not observed. The entire object needs to be replaced if you want the view to see changed values.

Inline style object

You can define an object right within your view template, no need to define a ViewModel object if you’re only intending on supplying values inline for whatever reason.

<div css.bind="{color: 'red'}">My Text</div>

ViewModel object

In most cases when you use objects for defining inline styling, you will define them inside of your ViewModel and then reference that class variable inside of your view template.

Please note:
When a property value changes, your styles will not dynamically update. For example changing the property value of color below will not update the view with your new colour value. This is because object values are not individually observed. However, if you replace the object entirely, your changes will update as intended.

export class MyClass {
    myCss = {
        color: 'red'
    };
}
<template>
    <div css.bind="myCss">My Text</div>
</template>

Style binding using strings

Very similar to the above example of using an object, except all styles are defined inside of a string and resemble what your style would look like if defined inline using a standard non binding style attribute. Replacing the string with a new value will result in your view seeing the updated changes.

export class MyClass {
    myCss = 'width: 400px; height: 250px; color: red';
}
<template>
    <div css.bind="myCss">My Text</div>
</template>

Style binding using String Interpolation

If you don’t want to use objects or strings, you can use inline styles with String Interpolation instead. The benefit of using String Interpolation is when values change, they are dynamically updated. Unlike using strings or objects where object properties are not individually observed, String Interpolation values are.

If color for example in the below example changes its value, the updated value is reflected on your element in the view right away. This allows you to create elements that have style values which react to changes. I built a custom colour picker component which shows the currently selected colour in a square using this technique.

<template>
    <div css="width: ${width}px; height: ${height}px; color:${color}">My Text</div>
</template>

Conclusion

Look at you now, baby: you’re binding with style.

Dwayne

Leave a Reply Cancel reply

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
eike
eike
6 years ago

>>I personally just use css for all style binding use-cases, which is an alias for style anyway.

WTF?! Can you please give some reference/source for that, i did not find anything and never heard of this. Or is this because there is some specific aurelia hook, that enables to do this.

0
Maxx
Maxx
4 years ago

can u share an example of binding the color attribute of style with a value converter..

I tried to use the following:

fa-svg is my customclass for rendering fa icons. the first part works and renders the icon correctly, but not the color part

Also would like to know how to display fa icons, using the i tag () with changing colors based on status (a property) of an entity.

0
David McClelland
David McClelland
4 years ago

Can you comment on pros and cons of the different methods with regard to impact on performance? I would think that styles set with bindings that update immediately would require more processing in order to be “watched” vs objects.

0
Esger Jellema
Esger Jellema
4 years ago

In order to bind an object property to style an element dynamically, you could use a getter function in the view-model. This makes it observable again as it will be treated as property of your model doing so.

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Waiting for an Element to Exist With JavaScript
  • Thoughts on the Flipper Zero
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Reliably waiting for network responses in Playwright
  • Wild Natural Deodorant Review

Recent Comments

  • Dwayne on Is Asking Developers How to Write FizzBuzz Outdated?
  • kevmeister68 on Is Asking Developers How to Write FizzBuzz Outdated?
  • Kevmeister68 on Start-Ups and Companies That Embrace Work From Anywhere Will Be More Likely to Survive the Coming Recession in 2023
  • kevmeister68 on What Would Get People Back Into the Office?
  • Dwayne on PHP Will Not Die

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz