Change color of an image using ngStyle

Question

I am sorry if this question sounds very naive but i am new to Angular 5. I need to change the color of an image based on the color code i am getting from my JSON response. I searched but i only found how to change background color. I couldn't find any examples.

Below is my json response snippet:

{"medDetailsEve":{"color":"#800000","medDate":"04/27/2018","medTime":"20:00","medId":"PE16","sequence":"EVEN","shape":"2","status":""}}

Below is the code i am trying

<img src="./assets/img/tab/{{data.shape}}.png" style="-webkit-filter: opacity(.5) drop-shadow(0 0 0 {{data.color}}) class="pill-img">"

Answer 1

In style attribute I think you are missing ; between opacity and drop-shadow:

style="-webkit-filter: opacity(.5); drop-shadow(0 0 0 {{data.color}})"

Answer 2

Use ngStyle with concatenation:

<img ... [ngStyle]="{'-webkit-filter': 'opacity(.5) drop-shadow(0 0 0 '+data.color}">

Demo