Passing JSON Configuration Objects to Angular Directive Input Properties

Image by 0fjd125gk87 from Pixabay

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>

Demo