Servoy default components in ng-client provide functionality for it's properties via directives applied to the component template.It is known that some properties are design time only properties and some properties are also runtime properties and thus the implementation of a design time property is different than a runtime property. The design time directive only applies the property once at initialization and it's job is done .The runtime directives 'watches' (via angular $watch()) any property change coming from the server and updates the component.

These directives were created with webclient behavior in mind and implementation can change  since servoy 8 is alpha.

The directives provided are:

svy-autoapply- this is a core directive which requires angular's 'ng-model' directive alongside it.It's responability is to listen for any change (html 'change' event) from the input element applied to  and sends the changes to the corresponding property on the server.

svy-background (Runtime | accepts 'color' property type from spec as the model attribute value)  sets the 'background-color' style of the element being applied  to.It also watches the property values and updates the compoent if the compoent is updated on the server (being a runtume ) . Background color is dependend on the trasparency flag in servoy and it only applies the background color if the trasparency flag is not set .It's usage in ngClient components is:

svy-background='model.transparent ? "transparent" : model.background'

svy-foreground (Runtime | color) - same as svy-background but for 'color' css property and independent of trasparent property.

svy-foreground='model.foreground'

svy-scrollbars (Design | scrollbars) - sets provided scrollbars on the html element being applied to

 svy-scrollbars='model.scrollbars'

svy-font (Runtime | font) - sets provided font on the html element being applied to

       svy-font='model.fontType'

svy-margin(Design | dimension) - sets provided magin as css padding on the html element being applied to

 svy-margin='model.margin'

svy-border (Runtime | border) - sets provided border css on the html element being applied to

 svy-border='model.borderType' 

svy-tooltip (?Design? | tagstring) - sets the tooltip text  (TODO change to $watch() because of tagstring)

svy-tooltip='model.toolTipText'

svy-textrotation(Design | {type:'int', values:[0,90,180,270]} )

svy-textrotation ='model.textRotation'

svy-selectonenter(Design | boolean ) - if true will select text when field gets focus 

svy-selectonenter ='model.selectOnEnter'

svy-rollovercursor(Design | int ) - value 12 means hand rollover cursor (css pointer)

svy-rollovercursor='model.rolloverCursor'

svy-imagemediaid(Runtime | media )

svy-imagemediaid='model.imageMediaID'

svy-mnemonic(Design | string) - sets the 'accesskey' html attribute value

svy-mnemonic='model.mnemonic'

svy-tabseq(Runtime| tabseq) - sets the 'tabseq' html attribute and watches

 svy-tabseq='model.tabSeq'

svy-format(Runtime| {for:'dataProviderID' , type:'format'}) - requires to be placed on input fields with an ng-model . Registers parsers and forrmatters for ng-model controller to parse and format based on the provided servoy format;

svy-format="model.format"

Besides these directives there are also some angular filters:

mnemonicletterFilter  - should be applied to an expression bound to an 'ng-bind-html' to underline the first letter coresponding to the filter  parameter parameter  example :

ng-bind-html='model.myStringProperty | mnemonicletterFilter:model.mnemonicProp'

formatFilter- formats the given expression result with the corresponding  servoy format property(it is used when you don't need editing support , for example labels, buttons)

ng-bind='model.myStringProperty | formatFilter:model.formatProp'