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?

Answer 1

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