aurelia Binding Binding Styles

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

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>


Got any aurelia Question?