Passing JSON Configuration Objects to Angular Directive Input Properties

Ole Ersoy
Feb 25, 2023


Image by 0fjd125gk87 from Pixabay


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.


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.


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) {
const c: Color = JSON.parse(value);

Here’s a sample element declaration.

<button config='{ "color": "yellow"}'>hello</button>