Our directive ElColorDirective has 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>

Passing JSON Configuration Objects to Angular Directive Input Properties | Task

Scenario

Approach

Demo