• '?': Will compile the expression once an set the property's value to the result.
• '.': Will update the property's value to the result of the expression whenever it changes.
• ':': Will keep the property's value in sync with the value at the path given in the attribute's value.

If one of these characters is found they will be trimmed from the string.If the string is not empty after that it will be used as the name of attribute.Otherwise the attribute's name is assumed to be equal to a hyphenated versionof the property name.

Example

export default class MyComponent extends Component {    static attributes = {        // <my-component use-as-is=""></my-component>        useAsIs: '',        // <my-component compile-once="myVar + 1"></my-component>        compileOnce: '?',        // <my-component bind-one-way="myVar + 10"></my-component>        bindOneWay: '.',        // <my-component my-attribute="myVar"></my-component>        bindTwoWayAndDefineName: ':my-attribute'    };}

It should be a map where the keys are paths that should be watched on the component andthe values are names of methods that will be invoked on the component instance.

Example

In the following example you can see a component that reacts to changesin the size of the defining element.

export default class MyComponent extends Component {    static inject: {element: Element};    static bindings = {        'element.clientHeight': 'heightChange'    };    width: number;    heightChange(height: number) {        this.width = height * 2;    }}

In general you should not make use of this at all. Your template should bein a separate file with the same name and in the same folder as your component'sTypeScript file. This feature is only for advanced usage (for example having an emptytemplate by setting this to an empty string) or rapid prototyping.