Fashion for the repetitive elements, activated by events

Looking for ways to style a specific table element that is generated from a repeat.for loop on a <td> tag.

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

My initial attempt at styling the repeated element doesn't seem to be working as expected.

I aim to have the validTo field appear in bold font when a specific event is triggered. Currently, I'm struggling to find a suitable solution for this. Any assistance or suggestions would be greatly appreciated!

csstypescriptaurelia

Answer №1

It is advisable to use the css attribute instead of the class attribute when setting a style. Also, ensure you spell font-weight correctly to avoid any issues.

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

Alternatively, you can utilize style.bind if you find that syntax more preferable:

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

To apply a style to an HTML element when an event occurs, consider:

  • Setting a property on the object and toggling it when the event occurs. For instance, use 
    css="${field.bolded ? 'font-weight: bold;' : ''}"
    on your HTML element and then set fields[index].bolded = true in your viewmodel.
  • Referencing the HTML element with a ref attribute and toggling the styling directly from the viewmodel. Use ref="fieldElements[$index]" and toggle in the viewmodel: 
    fieldElements[index].style.fontWeight = 'bold'

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

hitting the value of the text input

Is there a way to strike through only the first word in an input box of type text, without editing the html? I've tried using css text-decoration: line-through; but it's striking both words. Any suggestions on how to achieve this using javascript ...

javascripthtmlcss

Is there a way to link two HTML files containing jQuery within an HTML index file?

I'm currently working on creating an index page for a pair of HTML files that utilize jquery. Let's break down the structure of these files: Emps1, Emps2: These are two HTML tables that start off empty. TabA_stats, TabB_stats: Each HTML file ha ...

javascriptjqueryhtmlcss

Encountering the "potential null object" TypeScript issue when utilizing template ref data in Vue

Currently, I am trying to make modifications to the CSS rules of an <h1> element with a reference ref="header". However, I have encountered a TypeScript error that is preventing me from doing so. const header = ref<HTMLElement | null> ...

javascripttypescriptvue.jsfrontend

What is the best way to extract a number from a string in JavaScript?

There are instances in HTML files where a <p> tag displays the price of a product, such as ""1,200,000 Dollar"". When a user adds this product to their cart, I want the webpage to show the total price in the cart. In JavaScript, I aim to e ...

javascripthtmlcss

Issue occurs where the system is unable to recognize a defined variable, despite it being clearly defined

I keep encountering an error message stating that my variable is not defined, even though I have clearly defined it just a few lines above where the error occurs. The reason behind this error is baffling to me, as I cannot identify any potential triggers ...

typescriptvue.jsvuejs3

Experience the sleek transparency when black hues grace the interface on iOS 14 and above

When implementing the code snippet below, .packages > .ulWrapper::after { background: linear-gradient( to left, var(--edge-color) 5%, rgba(0, 0, 0, 0) 95% ); /* option 1 - red */ background: linear-gradient( to left, var(--edg ...

htmlcss

Reactive forms in Angular now support changing focus when the Enter key is pressed

I have successfully created a table and a button that generates dynamic rows with inputs inside the table. One issue I'm facing is that when I press enter in the first input, a new row is created (which works), but I can't seem to focus on the ne ...

javascriptangulartypescript

What is the most effective way to retrieve cursors from individual entities in a Google Cloud Datastore query?

I am currently working on integrating Google Cloud Datastore into my NodeJS application. One issue I have encountered is that when making a query, only the end cursor is returned by default, rather than the cursor for each entity in the response. For insta ...

javascriptnode.jstypescriptgoogle-cloud-datastoredatastore

expanding menu options in a dynamic design

My webpage features a logo alongside a menu: Here's the HTML code: <div id="logomenuwrapper"> <div id="logo"><img src="img/logo_light.jpg"/></div> <div id="menu"> <ul> <li><a href="#">About ...

htmlcssresponsive-designfluid

Error: Unable to access the 'myDate' property as it is not defined

I've been working on a simple code, but I keep encountering a browser error. The expressjs logs also show an error message. TypeError: Cannot read property 'myDate' of undefined at getReportTable (XXX\dist\controllers&bsol ...

node.jstypescriptexpressmongoose

What is the best way to animate specific table data within a table row using ng-animate?

Are you working with Angular's ng-repeat to display a table with multiple rows? Do you wish to add an animation effect to specific cells when a user hovers over a row in the table? In the scenario outlined below, the goal is to have only certain cell ...

javascripthtmlcssangularjsgsap

Tips for Resizing a Div While Maintaining Aspect Ratio

I'm trying to create a div with a background image size of 1170px x 929px that will maintain its aspect ratio when the width is resized. Can someone explain how to achieve this using CSS? Below is the code I have so far: <section class="box"> ...

htmlcss

Is it possible to automatically adjust the text color based on the dynamic background color?

While browsing Palantir.com, I noticed that the logo color always changes to be the inverse of the background color behind it as the background scrolls or changes. https://i.sstatic.net/BYvZa.png I'm currently working on a website using Wordpress an ...

htmlcsswordpress

What is the reason behind TypeScript rejecting the syntax of checkbox input elements?

When trying to use the following checkbox in TypeScript, I encountered a warning: <input type="checkbox" onClick={(event: React.MouseEvent<HTMLInputElement>) => { setIsTOSAccepted(event.target.checked); }} defaultChecked={ ...

htmlreactjstypescript

Is there a way to horizontally navigate a pallet using Next and Prev buttons?

As someone new to development, I am looking for a way to scroll my question pallet up and down based on the question number when I click next and previous buttons. In my pallet div, there are over 200 questions which are dynamically generated. However, th ...

javascriptjqueryhtmlcss

Currently working on enhancing the responsiveness of the login form

I am encountering difficulties while trying to make the page responsive. I've checked my basic code, but something seems off. Could you please take a look at the plnkr link below and give me some feedback on where I might have gone wrong? Here's ...

htmlcssbootstrap-4

Custom HTML select element not triggering the onchange event

I found a code snippet on https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select that demonstrates a custom select input with an onchange event. However, I am facing an issue where the onchange event does not get triggered when I change th ...

javascripthtmlcss

Attempting to build a table within a table structure

My goal is to create a nested table structure similar to this image: https://i.sstatic.net/v6lZo.png The number of months, topics, and arguments for each topic can vary as they are retrieved from a database. I have attempted to implement this functionali ...

htmlangulartypescriptbootstrap-4

Move the iframe to the back on Internet Explorer

I am currently in the process of creating a webpage that features a popup div (utilizing javascript/jquery) to display some text. However, I am encountering a problem where, in Internet Explorer, a youtube embedded video (iframe) remains in front of the po ...

javascriptjqueryhtmlcss

The dynamic combination of jCarousel, jQuery Accordion, and fade in effects

Take a look at this link www.aboud-creative.com/demos/mckinley3. You'll find a jQuery Accordion with jCarousel inside the "Developments" section. I have implemented a standard fadeIn function for the logo, accordion, and a stag on the bottom right to ...

javascriptjqueryhtmlcssjcarousel