I am currently in the process of customizing a horizontal timeline resembling https://codepen.io/ritz078/pen/LGRWjE/. The demo includes hardcoded dates which I want to replace with an array of Dates (timelineParsedDates)
<ol>
<li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
<li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
<li><a href="#0" data-date="20/04/2014">20 Apr</a></li>
<li><a href="#0" data-date="20/05/2014">20 May</a></li>
<li><a href="#0" data-date="09/07/2014">09 Jul</a></li>
<li><a href="#0" data-date="30/08/2014">30 Aug</a></li>
<li><a href="#0" data-date="15/09/2014">15 Sep</a></li>
<li><a href="#0" data-date="01/11/2014">01 Nov</a></li>
<li><a href="#0" data-date="10/12/2014">10 Dec</a></li>
<li><a href="#0" data-date="19/01/2015">19 Jan</a></li>
<li><a href="#0" data-date="03/03/2015">3 Mar</a></li>
<li *ngFor="let parsedDate of timelineParsedDates; let index = index;">
<a href="#0" data-date="parsedDate">{{parsedDate}}</a>
</li>
<ol>
Upon inspecting the browser console, it initially displays the last hardcoded date (03/03/2015) followed by a dynamically generated list item with an anchor tag. The value for {{parsedDate}} is correctly displayed, however, the data-data=" " interprets this as a string causing issues with the logic https://i.sstatic.net/z7wSJ.png
When attempting
data-date={{parsedDate}}
The following error occurs:
Template parse errors: Can't bind to 'date' since it isn't a known property of 'a'. ("<li *ngFor="let parsedDate of timelineParsedDates; let index = index"> <a href=\"#0\" [ERROR ->]data-date={{parsedDate}}>{{parsedDate}} </li>
If anyone has suggestions on how I can dynamically load these values into the data-data property, it would be greatly appreciated. I understand that mixing Angular with jQuery is not ideal, but this specific horizontal timeline design stood out to me. Additionally, I am relatively new to jQuery and struggling to find relevant resources on S/O, hence seeking advice here. Thank you in advance.