Example component
import { Component } from 'ace-js';
import Tpl from './example.component.html';
export class ExampleComponent extends Component {
constructor(params) {
super(params, {
template: Tpl,
props: ()=> {
return {
title: 'Some title'
}
}
hostEvents: {
click: 'rootClick'
},
hostClasses: {
selected: 'props.selected',
hidden: '!props.visible'
},
hostStyles: {
width: {value: 'props.width', suffix: 'px'}
}
});
}
onInit() {
}
}
or with decorator
import { Component, Decorators } from '../../../../core';
import Tpl from './doc-interpolation.component.html';
@Decorators.ComponentDecorator({
template: Tpl,
props: ()=> {
return {
isVisible: true,
title: 'test'
}
}
computed: {
titleNew : function() {
return this.title.toUpperCase();
}
}
})
export class ExampleComponent {
onInit() {
}
}
template
Specifies Tpl template for current component
props
Initial properties of component(must be as function)
hostEvents
Add event listeners to root element of component
hostClasses
Bind classList of root element with props.
selected - key, as class name
'props.selected' - value, as propery to bind
hostStyles
Bind styles of root element with props.
width - key, as css property
value:string - property to bind
suffix:string - for example 'px'
computed
Bind props with other props by one-way binding (must be as function)