How to bind to a data attribute using Angular 2+?

Question

I am using a data table created mostly with css that I found online. In one of the columns there is a css data attribute "data-title" which is assigned a string.

<td data-title="someString">

When I enter a string, the styling inside the column works as expected. When I try to bind to an objects string, the binding doesn't work like I would expect. I tried

<td data-title="object.someString">

which just displays literal 'object.someString' and I tried

<td data-title="{{object.someString}}">

which displays nothing (blank). Any idea why my binding isn't working here?

CSS:

.responsive-table tbody td[data-title]:before {
  content: attr(data-title);
  float: left;
  font-size: .9em;
  color: #565248;
}

@media (min-width: 48em) {
  .responsive-table tbody td[data-title]:before {
    content: none;
  }
}

Please post the relevant CSS. Is it using the td::before { content: attr('data-title'); } property and function? — Dai
– Dai, Commented Sep 6, 2017 at 0:01
Please undo your edit that incorrectly refers to the attributes as "CSS selector attributes". The data- attributes are not "CSS selector attributes". CSS selectors can use any element attribute. — Dai
– Dai, Commented Sep 6, 2017 at 0:06

Dai · Accepted Answer · 2017-09-06 00:05:08Z

26

Angular 2 doesn't bind to data- attributes using the simpler {{ }} syntax because it tries to map them to DOM properties, and there isn't a DOM property for data-title (and it seems Angular2 isn't smart enough to use dataset yet - unless I'm missing something).

So to bind to data- attributes you need to use the attr.data-title={{}} or [attr.data-...]="" syntax. See this QA: Angular 2 data attributes

<td [attr.data-title]="object.someString">

Or:

<td attr.data-title="{{object.someString}}">

answered Sep 6, 2017 at 0:05

Dai

158k31 gold badges314 silver badges436 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Devmaleeq Over a year ago

Can i also bind a function to data-* attribute? I've tried but it just doesn't work.

Collectives™ on Stack Overflow

How to bind to a data attribute using Angular 2+?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related