Angular : Property Binding on a div tag-CodePudding

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 ?

CodePudding user response：

Using attr. should work with div.

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

CodePudding user response：

To use attribute binding, try this:

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

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