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;
}
}
Angular data binding is a two-way process: it can both send and receive data. This means that when you change something in your view, the model updates automatically, and vice versa. The ngModel directive makes this two-way data binding possible.
Data binding in AngularJS is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.
AngularJS provides two types of Data Binding: One-way data binding. Two-way data binding.
One-way data binding in Angular (i.e. unidirectional binding) is a way to bind data from the component to the view (DOM) or vice versa - from view to the component. It is used to display information to the end-user which automatically stays synchronized with each change of the underlying data.
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}}">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With