angularproperty-binding

Angular : Property Binding on a div tag

I have a custom JS file that shows a countdown bar on a div tag. This is the html code :

Component.html

<div data-countdown="2021-11-05"></div>

In my component I have a date value for simplicity let's say it's as follow :

Component.ts

dateValue : any = '2021-08-08'

I want this dateValue to be bound to the html attribute value of data-countdown.

Although when trying this :

<div [data-countdown]="dateValue"></div>

or this

<div data-countdown="{{dateValue}}"></div>

I get a compilation error saying :

cannot bind to 'data-countdown' since it is a known property of 'div'.

I want to keep the same html coding and not call the js logic in my component, is there any way I can pass a dynamic value to data-countdown of the div tag ?

Solution

  • Using attr. then your specific attribute should work with div.

    <div [attr.data-countdown]="dateValue"></div>