Scenario
Our directive ElColorDirectivehas a config custom Angular @Input property that we need to set using a configuration object.
The directive targets elements defined with the config property like this.
button[config] Since the selector includes [config] we cannot pass the configuration object in like this.
<button [config]="{ color: 'yellow' }">hello</button>Putting brackets around config ( [config] ) means that config will no longer be in the DOM and therefore not matched by the button[config] selector.
Approach
All non bracketed @Input properties are set with type string , therefore we can pass in a JSON object and parse it.
@Input() set config(value: string) {
console.log(value);
const c: Color = JSON.parse(value);
console.log(c.color);
}Here’s a sample element declaration.
<button config='{ "color": "yellow"}'>hello</button>
