Within the nested Component of Angular4, you will find the following snippet 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 issue lies with data-parent and its value of {{ day.date }}. When I tested the code in the browser, Angular threw the following error:
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 arises specifically when injecting a variable into a data-* attribute. Removing {{ day.date }} allows it to work properly. Additionally, changing the attribute name from data-parent to something like data-nothing still results in an error (eliminating any possibility of a naming conflict).
The {{ day.date }} object does exist and function correctly, showing that the issue only arises within this particular setup.
So, what exactly is causing this problem?