ElementAttribute

This decorator is extremely useful for developing configurable components. The following component is used to demonstrate the examples:

@Component({
	selector: 'my-component'
})
class MyComponent extends AbstractComponent {

	@ElementAttribute('ConfigRegistryValueName')
	protected duration = 500;
}

This decorator overwrites the value of the property in the following ways at runtime:

1. We check whether the element found via the selector has a data attribute with the same name. If an attribute is found (the attribute does not have to have the data prefix), then the value is used by it.

<!-- duration will be 333 at runtime -->
<div my-component duration="333"></div>

<!-- duration will be 500 at runtime -->
<div my-component></div>

2. If step one fails, the ConfigRegistry will check if a configuration value has been set for this attribute. The name of the configuration value used to find the value can be passed to the decorator as an optional first parameter.

//this code has to be at the top of main typescript file.
ConfigRegistry.setConfig('ConfigRegistryValueName', 9000);

<!-- duration will be 333 at runtime -->
<div my-component duration="333"></div>

<!-- duration will be 9000 at runtime -->
<div my-component></div>

3. If the second step also fails, simply use the value specified as default in the property. This case is already demonstrated on the first two examples