在 HTML5 数据属性中设置 angular 组件变量值

Question

I have a

that its css has before with content that depends on the li attribute:

 ::before { content:attr(data-datetime) }

The Html that works:

 <li class="timeline-seperator" data-datetime="01/2020"></li>

The problem is that I would like the data-datetime attribute takes its value from the angular component function\variable (and not a fixed value as seen here)

Is there a way to make it?

Answer 1

Demo Angular

u can do it for custom attribute like attr. to bind

<li class="timeline-seperator"  [attr.data-datetime]="name"></li>

or

<li class="timeline-seperator"  attr.data-datetime="{{name}}"></li>