0

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.

Babulaas
  • 761
  • 3
  • 13
  • 47

1 Answers1

1

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.

Lukasz Gawrys
  • 1,234
  • 2
  • 8