aurelia Binding Binding Styles


Example

Binding to the browser native style attribute using Aurelia. If using string interpolation, you should use the css alias so styling works in Internet Explorer.

Style String

export class MyViewModel {
  constructor() {
    this.styleString = 'color: #F2D3D6; background-color: #333';
  }
}
<template>
  <div style.bind="styleString"></div>
</template>

Style Object

export class MyViewModel {
  constructor() {
    this.styles = {color: '#F2D3D6', 'background-color': '#333'};
  }
}
<template>
  <div style.bind="styles"></div>
</template>

String Interpolation

Very similar to string binding above, this allows you to use string interpolation to bind to styles instead. If any of the values change, they will be updated in the view accordingly.

Note: for Internet Explorer compatibility, we use the alias css to bind styles. This ensures that string interpolation works in Internet Explorer.

export class MyViewModel {
    color = 'red';
    height = 350;
    width = 350;
}
<template>
    <div css="width: ${width}px; height: ${height}px; color:${color}">My Text</div>
</template>