a term expected error when trying to insert typescript element in the styling

Issue

In my ts file I have elements that I use in the html file. In this example I use element.color (value = #3b5998) and element.name (value = Facebook). When putting the values like below the icon one works but the color is not. The code looks like this:

<fa style="color: {{element.color}};" name="{{element.icon}} fa-3x"></fa>

After the color: there is a red line saying, "a term expected". But I don't know what to change. I know it's a dump error but i'm stuck.

Image

Solution

To bind to a style there are two ways:

Using style binding

<fa [style.color]="element.color" [name]="element.icon + ' fa-3x'"></fa>

or by using the NgStyle directive

<fa [ngStyle]="{ color: element.color }" [name]="element.icon + 'fa-3x'"></fa>

Answered By - Poul Kruijt