How to add conditional case sensitive attribute in Angular 2?

Question

I want to add 'tourAnchor' attribute dynamically, for which I am adding below line.

<div [attr.tourAnchor]=" feedbackIndex == 0 ? 'like' : null">

But, the attribute is being replaced to case insensitive and upon condition check, it is being converted as

<div touranchor="like">

Could you please help me to retain 'tourAnchor' to be camel case?

According to: https://angular.io/guide/property-binding#colspan "Interpolation and property binding can set only properties, not attributes." So, it is not possible? I had to refactor the components a bit. Could be an useful feature. — Viktor Reinok, May 30 '22 at 13:05

score 0 · Answer 1 · answered Mar 11 '19 at 09:15

Html is not case sensitive and tags and attributes considered to be lowercase check this , when I face this problem I use data attribute to save the key and another for the key

May be this will work for you

template

<p [attr.data-key]="'tourAnchor'" [attr.data-value]="'like'"  >
  tourAnchor - like
</p>

<p [attr.data-key]="'tourAnchor'" [attr.data-value]="'dislike'"  >
  tourAnchor - like
</p>

style

p[data-key="tourAnchor"][data-value="like"] {
  color:blue
}


p[data-key="tourAnchor"][data-value="dislike"] {
  color:red
}

stackblitz demo

How to add conditional case sensitive attribute in Angular 2?

1 Answers1