How can I implement dynamic styling for the rows in the PrimeNG table?

I have the MyObject.ts file with the following properties:

name: String
rowStyle: String

In addition, I have a MyComponent.ts file containing:

myObject1: MyObject = new MyObject();
myObject2: MyObject = new MyObject();

myObjectList: MyObject[] = [];

myObject1.name = "Red Color Row";
myObject1.rowStyle = "background-color: red";
myObject2.name = "Bold Font";
myObject2.rowStyle = "font-weight: bold";

myObjectList.push(myObject1);
myObjectList.push(myObject2);

Lastly, in my MyComponent.html file, I have the following structure:

<p-table [value]="myObjectList">
     <ng-template pTemplate="header">
            <tr>
              <th>Name</th>
              <th>Styles</th>
            </tr>
      </ng-template>

      <ng-template pTemplate="body" let-listObject>
            <tr [ngStyle]="{'styles': listObject.rowStyle}">
              <td>{{ listObject.name }}</td>
              <td>{{ listObject.rowStyle }}</td>
            </tr>
      </ng-template>
</p-table>

How can I apply the specified styles from the rowStyle property to each row of the table?

Answer №1

Give this a shot

<tr style="{{tableElement.rowFormat}}">

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

Update the CSS styling of a parent div based on the active state of specific child divs

I have a class with 4 distinct columns. div class="mainContent"> <div class="left-Col-1" *ngIf="data-1"> </div> <div class="left-Col-2" *ngIf="!data-1"> ...

Is the "ngIf" directive not functioning properly within a "ngFor" loop in Angular?

I am in the process of developing an e-commerce website that focuses on selling a variety of shirts. Currently, I have set up a system where all the available shirts are displayed using an *ngFor loop. My goal is to create a feature that allows users to cl ...

Creating a JAR file for an Angular 2 application with Maven

My Front-End application is constructed using Angular2 + Webpack, organized as follows: > app > config > dist > dll > node_modules > src pom.xml package.json ... (other files) Currently, I am exploring th ...

Tips on determining the data type for a personalized useFetch hook

I want to develop a useFetch hook to handle various types of data like objects and arrays. Is there a way to make it dynamic without specifying a specific type? Sample function useRequest(url: string, method: Method, data: any) { const [response, s ...

What is the method for instructing the Typescript compiler to process JSX within .ts files?

My .ts files contain .jsx syntax, and I am looking to instruct tsc on how to compile them the way it compiles .tsx files. Is there a way to adjust the configuration of tsc to achieve this? Additionally, are there steps to configure vscode for proper synt ...

Nonconforming Typescript argument specification

I've been struggling to pass this TypeScript array to a function. Despite trying multiple parameter types in an attempt to get it to compile, none of them have worked so far. Here is the array in question: var driverTally = [ { dr ...

TypeScript does not pay attention to additional properties in the return type of the setState function

I'm completely lost here. I don't understand why typescript allows me to return anything in the setFormValidation call as long as I include the prevState spread in the return object. It seems to ignore all other properties that I return in the ob ...

Next.js TypeScript throws an error stating that the object 'window' is not defined

When trying to declare an audio context, I encountered an error stating that window is undefined. I attempted declaring declare const window :any above window.Context, but the issue persists. Does anyone have a solution for this problem? window.AudioCont ...

Encountered an unexpected import token in Angular2 (SystemJS)

i am trying to find a solution for this issue in my Angular2 project. I encountered an error and need assistance: `"(SystemJS) Unexpected token import SyntaxError: Unexpected token import at Object.eval (http://....../app.module.js:14:25) at eval (h ...

The issue of Eslint flagging a no-unused-vars error when actually using an interface in a

Currently, I'm working with Vue along with Vue CLI and Typescript. I have imported an interface from a Vuex file and utilized it for type annotation in mapState. However, I am encountering an error flagged by eslint. 'State' is defined ...

Image not found in next.js

Working Environment ・ next.js ・ typescript ・ styled-components I uploaded the image in the folder inside pages, but it is not showing up. Why is that? // package.json   { "name": "nextapp", "version": &qu ...

Error: The program encountered a type error while trying to access the '0' property of an undefined or null reference

I am a beginner in the world of coding and I am currently working on creating an application that allows users to add items to their order. My goal is to have the quantity of an item increase when it is selected multiple times, rather than listing the same ...

Can you tell me the data type of IconButtons in Material UI when using TypeScript?

Currently, I am in the process of creating a sidebar using Material UI in Next JS with typescript. My plan is to create a helper function that will help display items within the sidebar. // LeftSidebar.tsx import {List,ListItem,ListItemButton,ListItemIcon ...

Leveraging Razor for creating Angular2 templates

I'm attempting to utilize Razor to create the html used in an Angular template. My setup involves Angular v 2.0.0 and this is how my Contract.cshtml file looks: <script> System.import('contract.js').catch(function(err){ console.err ...

Executing multiple HTTP requests in Angular using the HttpClient

Recently, I came across a concerning issue in my Angular 5 App. It all started with this simple call in my service: interface U{ name:string; } ... constructor(private http : *Http*, private httpC:HttpClient) // Http is deprecated - its a compare test ...

Angular encountered an error: spawn UNKNOWN was not handled

Within my Angular-13 project, everything had been running smoothly. However, out of nowhere, I encountered an error when trying to run ng serve: An unhandled exception occurred: spawn UNKNOWN See "C:\Users\JOSHU~1.IBE\AppData\Local ...

How to show an item using ngFor in Angular 5 with a delay

Currently, I am facing a situation wherein I have an array that gets filled at runtime. My goal is to display its elements in an HTML template using the ngFor loop with a slight delay between each item. For example, I want the first item to be displayed, t ...

Leveraging the power of both TypeScript 2.3 and 2.4 concurrently within Visual Studio 2015.3 on a single machine

Can TS 2.3 and TS 2.4 be used on the same machine simultaneously? For example, I have one project in VS 2015.3 compiling with TS 2.3 and another project compiling with the latest TypeScript version (TS 2.4). I recently installed TypeScript 2.4, which aut ...

I am facing a problem with React Hooks useRef where I am unable to retrieve the updated state value

Trying to use useRef with React hooks, I encountered an issue where the state of the child component changes when calling the setAccountVal method, but upon alerting the value it remains as "Ege". Any ideas on how to resolve this? import React, { useS ...

Angular does not automatically cancel a wrapped HTTP Request when unsubscribing

Update: The reason for not using the built-in HttpClient and instead opting to use our own HttpService is because we need to intercept the response. Our custom HttpService wraps the Angular provided HttpClient to apply headers, authorizations, and perform ...