Angular 4 allows you to assign unique colors to each row index in an HTML table

Question

Angular 4 allows you to assign unique colors to each row index in an HTML table

My goal is to dynamically change the colors of selected rows every time a button outside the table is clicked. I am currently utilizing the latest version of Angular.

While I am familiar with setting row colors using CSS, I am uncertain about how to manipulate the CSS class programmatically in TypeScript.

.ui-table .ui-table-tbody > tr:nth-child(1) {
    background-color: #2DA449; 
}

Is there a method to modify the CSS class in TypeScript in order to specify the child index and background color?

angular typescript

Answer 1

Answer №1

Using Typescript

export class DecoratorExample{
    elements:any[];
    modifyElements(){
    // Here I am simply altering the properties of the first element, but you can customize this logic as needed 
    this.elements[0].style ="#ddd";
    }
}

HTML Integration

<button (click)="modifyElements()">Adjust styles<button/>
<table>
  <tr *ngFor="let element in elements;let i=index" [style.color]="element.style">
    ...
  </tr>
</table>

You can refer to additional resources at https://angular.io/guide/template-syntax#binding-targets

Answer 2

Using Typescript

export class DecoratorExample{
    elements:any[];
    modifyElements(){
    // Here I am simply altering the properties of the first element, but you can customize this logic as needed 
    this.elements[0].style ="#ddd";
    }
}

HTML Integration

<button (click)="modifyElements()">Adjust styles<button/>
<table>
  <tr *ngFor="let element in elements;let i=index" [style.color]="element.style">
    ...
  </tr>
</table>

You can refer to additional resources at https://angular.io/guide/template-syntax#binding-targets

Answer 3

Answer №2

Just include ngClass in your code :

<td [ngClass]="{'selected': checkSelected(i)}"> // make sure checkSelected returns a boolean value

SEE IT IN ACTION HERE

Answer 4

Just include ngClass in your code :

<td [ngClass]="{'selected': checkSelected(i)}"> // make sure checkSelected returns a boolean value

SEE IT IN ACTION HERE

Angular 4 allows you to assign unique colors to each row index in an HTML table

Answer №1

Answer №2

Similar questions

Running an Angular application on dual hosts

The vertical lines separating the buttons are not evenly centered

Empty results in NgRx Parameterized Selector

Component that wraps around children elements and passes props to their render function

Is it considered appropriate to return null in a didReceiveResponse callback function?

What strategies can be employed to mitigate the activation of the losing arm in a Promise.race?

What is the best way to flatten a 2D array using TypeScript?

After running a yarn build on a TypeScript project using a .projenrc.js file, make sure to include any packaged or additional text files in the lib folder, rather

When employing the caret symbol (^) in package.json, it fails to update the minor version

A convenient utility for generating React components with pre-populated Tailwind CSS classes

Tips for setting up a typeorm entity with attention to its nullable fields

How can 'this' be converted from D3 JavaScript to TypeScript?

Is there a new implementation of "ComponentFactoryResolver deprecated" with missing attributes?

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

Guide to developing universal customized commands in Vue 3 using Typescript

Having difficulty integrating requireJS and Node's Require in a single TypeScript project

Experimenting with PIXI.js and Jest within a React Single Page Application

Having trouble invoking the "done" function in JQuery following a POST request

Cache for JSON Schema in VS Code

Transitioning to @angular/router version 3.0.0-alpha.3: A guide to implementing OnActivate upgrade