I have a toggle switch that decides what text to put in the div using data-checked
and data-unchecked
html attributes.
I also have an Angular pipe which translates all texts of website using the website language.
What I want to do basically is to put content in my toggle switch based on the language user chooses. (like I'm doing for the rest)
This code works fine:
<div
class="can-toggle__switch"
data-checked="USDT"
data-unchecked="IRT"
></div>
But when I want to bind data-checked and data-unchecked like so:
<div
class="can-toggle__switch"
[data-checked]="{{ firstItemText | translate }}"
[data-unchecked]="{{ secondItemText | translate }}"
></div>
I get the following error:
Can't bind to 'data-checked' since it isn't a known property of 'div'.
CodePudding user response:
You need to add the following prefix to your data binding.
[attr.data-checked]="{{ firstItemText | translate }}"
[attr.data-unchecked]="{{ secondItemText | translate }}"