Angular *ngFor with jQuery Binding

Question

I'm trying to modify a horizontal timeline like https://codepen.io/ritz078/pen/LGRWjE/ The Demo comes with some hardcoded dates and I'm trying to replace them 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>

Capture from the browserconsole shows first the last hardcoded date (03/03/2015) and second a generated listitem with a-tag. The value for {{parsedDate}} is correctly & correctly displayed, but that data-data=" " reads this angular like a string and messes with the rest of the logic

If I try something like

data-date={{parsedDate}}

I Get following error:

Template parse errors: Can't bind to 'date' since it isn't a known property of 'a'. (""let parsedDate of timelineParsedDates; let index = index;"> <a href="#0" [ERROR ->]data-date={{parsedDate}}>{{parsedDate}}

Anybody has an idea how I could maybe load those values dynamically into that data-data property? I read mixing Angular with jQuery is not ideally, but it was the nicest horizontal timeline I could find. Also I'm fairly new to jQuery) Cant really find any related questions on S/O so hoping to get some advice here. Thanks in advance.

if you absolutely have to use jQuery, then do it after you render the page. Simply make sure your component implements AfterViewInit. Then add any jQuery code inside ngAfterViewInit() {...} — Aleksey Solovey
– Aleksey Solovey, Commented Oct 2, 2020 at 19:53
@AlekseySolovey Great Tip, thankyou! Was doing it in OnInit() untill now, but was going to run into problems later. Thanks for helping me before it happened)) — BHANG
– BHANG, Commented Oct 2, 2020 at 20:07

yurzui · Accepted Answer · 2020-10-02 19:51:33Z

1

You can try using Angular attribute binding like:

[attr.data-date]="parsedDate"

answered Oct 2, 2020 at 19:51

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

Collectives™ on Stack Overflow

Angular *ngFor with jQuery Binding

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