1

I need to style one table element rendered from a repeat.for on a <td> tag.

<td repeat.for="field of fields" 
  class="${field.fieldKey == 'validTo' ? 'fontweigth: bold;': ''}"> 
  bold field-text here
</td>

This is just my inital attempt to check if I can style one of the element repeated(doesn't seem to work).

My intended end result is that the validTo-field gets a bold font when an event is triggered. Currently I don't have a good approach for this, any help is much appreciated!

Jesse
  • 3,522
  • 6
  • 25
  • 40
Øystein Seel
  • 917
  • 2
  • 9
  • 30

1 Answers1

1

You're attempting to set a style using the class attribute, you should be using the css attribute instead. Use css instead of style to avoid issues with IE & Edge. You have also misspelled font-weight.

<td repeat.for="field of fields" 
  css="${field.fieldKey == 'validTo' ? 'font-weight: bold;' : ''}">
  bold field-text here
</td>

You can also use style.bind if you prefer the syntax:

<td repeat.for="field of fields" 
  style.bind="field.fieldKey == 'validTo' ? 'font-weight: bold;' : ''">
  bold field-text here
</td>

A good way to have a style set on a particular HTML element when an event happens, is either to

  • Set a property on the object, and toggle that property when that event happens. Think of something like css="${field.bolded ? 'font-weight: bold;' : ''}" on your HTML element and then setting fields[index].bolded = true in your viewmodel.
  • Reference the HTML element using a ref attribute, and toggle the styling directly from the viewmodel. You'd have something like ref="fieldElements[$index]", and toggle in the viewmodel: fieldElements[index].style.fontWeight = 'bold'
Jesse
  • 3,522
  • 6
  • 25
  • 40
  • Now it works, but how can I reference this from my TS file, based on the event? – Øystein Seel Jun 11 '18 at 07:51
  • 3
    I've edited the answer to use the `css` attribute instead of `style`. Binding expressions inside a `style` attribute don't work in IE and some versions of Edge due to the browser removing any invalid CSS from the attribute's value before it is passed to JavaScript code. The `css` attribute shipped with the framework allows you to avoid this issue. – Ashley Grant Jun 11 '18 at 19:44