Binding: Class and Style

Class

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

    
  <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 css custom attribute when doing string interpolation in your view to ensure your application is compatible with Internet Explorer and Edge. If you don't use interpolation in css - it won't get processed, so if you are just using inline style - use the proper style attribute of HTMLElement.

    
  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>

    
  <template>
    <div css="width: 100px; height: 100px;"></div>
  </template>