.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>
(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
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 {
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>