Angular4 and data-* attributes with injected variable in nested Component

Question

Inside the nested Component of Angular4 have the following piece of code:

<a data-activator="classroom-panel-activator"
           data-toggle="collapse"
           data-parent="#accordion-{{ day.date }}"
           href="#info-panel-{{ schedule.referenceId }}"
           >
            Click me
</a>

The problem is with data-parent and its value of {{ day.date }} because when I ran the code in the browser, Angular throws the following:

Can't bind to 'parent' since it isn't a known property of 'a'. ("       <a data-activator="classroom-panel-activator"

       data-toggle="collapse"

       [ERROR ->]data-parent="#accordion-{{ day.date }}"

       href="#info-panel-{{ schedule.referenceId }}"

The problem really occurrs when the variable is injected into a data-* attribute. If I remove {{ day.date }} from it, then it works. Also, if I leave the {{ day.date }} and e.g. change the name from data-parent to data-nothing then error still occurrs (so it's not kind of name conflict with any keyword parent).

Of course {{ day.date }} object exists and works. It's just does not work in the scenario I have described.

So what is the problem then?

Trash Can · Accepted Answer · 2017-04-25 00:51:58Z

2

You want to use attribute binding

<a data-activator="classroom-panel-activator"
           data-toggle="collapse"
           [attr.data-parent]="'#accordion-' + day.date"
           href="#info-panel-{{ schedule.referenceId }}"
           >
            Click me
</a>

answered Apr 25, 2017 at 0:51

Trash Can

6,8325 gold badges27 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular4 and data-* attributes with injected variable in nested Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related