CODEWITHSUNDEEP
angularsvgdata-binding
Babulaas
Babulaas

Reputation: 869

angular template binding - svg data property

I have a svg (object element) and I like to change a part of the data property with an if else statement.

I can use ng template but if that is not necessary I rather not use it for keeping my code clean.

<object class="flag me-2" data="`../../../../assets/images/lang/${currentLang === 'nl': 'en' ? 'nl'}.svg`"> </object>

normal: ../../../../assets/images/lang/en.svg

I want to change the 'en' based on a if else statement.

I tried to use a function, string interpolation, binding but I some how it doesn't work on a 'object' in html

I tried also property binding => [attr.data]="getFlag()" the function return the full path as a string.

Upvotes: 0

Views: 422

Answers (1)

Lukasz Gawrys
Lukasz Gawrys

Reputation: 1334

You would have to use expression binding on data attribute. Something like this.

<object class="flag me-2" [attr.data]="'../../../../assets/images/lang/' + (currentLang === 'nl' ? 'nl' : 'en') + '.svg'"> </object>

This will build the URL correctly up and pass it to data attribute but cause a problem with unsafe value which you can resolve by sanitizing the input.

Upvotes: 1

Related Questions