How to bind to data-checked and data-unchecked in Angular

Question

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'.

Answer 1

You need to add the following prefix to your data binding.

[attr.data-checked]="{{ firstItemText | translate }}"
[attr.data-unchecked]="{{ secondItemText | translate }}"