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

user_4971171 0
Viewed 532

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

angular typescript styling css html
2 Answers

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>
user_31069200

Try to remove the quotation marks (") between the attributes of the tag (fa). You need to put them only at the beginning and at the end of the record of all attributes

user_130078510
Related