Binding: Class and Style

Data-binding class and style attributes with Aurelia.

Class

You can bind an element's class attribute using string interpolation or with .bind/.one-time.


    <template>
      <div class="foo ${isActive ? 'active' : ''} bar"></div>
      <div class.bind="isActive ? 'active' : ''"></div>
      <div class.one-time="isActive ? 'active' : ''"></div>
    </template>
  

To ensure maximum interoperability with other JavaScript libraries, the binding system will only add or remove classes specified in the binding expression. This ensures classes added by other code (eg via classList.add(...)) are preserved. This "safe by default" behavior comes at a small cost but can be noticeable in benchmarks or other performance critical situations like repeats with lots of elements. You can opt out of the default behavior by binding directly to the element's className property using class-name.bind="...." or class-name.one-time="...". This will be marginally faster but can add up over a lot of bindings.

Style

You can bind a css string or object to an element's style attribute. Use the style attribute's alias, css when doing string interpolation to ensure your application is compatible with Internet Explorer and Edge.


    export class StyleData {
      constructor() {
        this.styleString = 'color: red; background-color: blue';

        this.styleObject = {
          color: 'red',
          'background-color': 'blue'
        };
      }
    }
  

    export class StyleData {
      styleString: string;
      styleObject: any;

      constructor() {
        this.styleString = 'color: red; background-color: blue';

        this.styleObject = {
          color: 'red',
          'background-color': 'blue'
        };
      }
    }
  

    <template>
      <div style.bind="styleString"></div>
      <div style.bind="styleObject"></div>
    </template>
  

    <template>
      <div style="width: ${width}px; height: ${height}px;"></div>
    </template>
  

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