Switch between every other pair of table rows, then repeat with the following two pairs

I am attempting to create a table with alternating row colors of green and yellow in sets of two. I have been using :nth-child but it is not working correctly. My table is automated using Angular 6 and styled with Angular Material 6.

If you would like to see my experimentation, you can view the stackblitz here: https://stackblitz.com/edit/angular-f6vmrt

Upon request, here is a screenshot of the table displayed in the browser:

In the screenshot, you'll notice that the first td cell is blue while the second remains the default color (white).https://i.sstatic.net/fDQ3v.png

javascriptcssangularangular-material-6

Answer №1

When utilizing the multiTemplateDataRows feature (similar to what you have in your code snippet), you have the option to employ the dataIndex property in order to assign classes using ngClass. Here is an adapted section of your code as an example:

<tr mat-row *matRowDef="let item; let i = dataIndex; columns: columnsToDisplay"
    class="sample-item-row" 
    [class.sample-expanded-row]="expandedItem === item" 
    [ngClass]="i % 2 === 0 ? 'green' : 'yellow'"
    (click)="expandedItem = item">
</tr>
<tr mat-row *matRowDef="let row; let i = dataIndex; columns: ['expandedDetail']"
    class="sample-detail-row" 
    [ngClass]="i % 2 === 0 ? 'green' : 'yellow'">
</tr>

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

Error: The function was not passed as a valid function

Currently, I am in the process of creating a concise 'Engine' class to streamline interactions with Three.js. I have restructured the Render() method from the example into this Engine JS class, as shown below: const Engine = function () { cons ...

javascriptthree.jsanonymous-function

Determine the total hours and minutes elapsed between two specific dates and times

Looking for some assistance here. I have a form where users need to input a start time and end time of an incident. After entering this information, they would manually calculate the duration between the two date times. I am attempting to streamline this p ...

javascriptjquery

Issue with adding a video to a playlist using Youtube API

While I have successfully implemented GET requests using the Youtube API v3, I am encountering difficulties when trying to make a POST request to add a video to a playlist. Despite trying various approaches such as including the key in the query string, pl ...

javascriptjqueryajaxyoutubeyoutube-api

Error in jQuery syntax when parsing a correctly formatted JSON object

My goal is to retrieve Instagram user details using jQuery ajax, which can be found at the following URL: https://www.instagram.com/instagram/?__a=1 However, when I try to make the Ajax call with the code below: $(document).ready(function(){ var instag ...

javascriptjqueryjsonajax

Managing table columns with Angular 6: Tips and Tricks

I am attempting to display items from a table using the following structure: columns: any[] = [ { field: 'title', header: 'Type of Leave' }, { field: 'nbDay', header: 'Number of Days' }, { field: ' ...

angular

Enabling dynamic HTML escaping in Flask template

Using Flask's jinja2 templates, I have set up a webpage that allows users to input data in Markdown format. When the user submits the data, a request is sent to the server and the corresponding view converts the data to HTML. Using jquery, I then inse ...

javascriptjqueryflaskjinja2

Passing data from an API in Vue.js to a different page

I'm a beginner with Vue Js and I'm looking for guidance on how to send data between two components. Currently, I am working on a Vue app that fetches a list of users from an API and displays them. My goal is to transfer data between these compone ...

javascriptvue.jsvue-componentvue-routervuejs3

Troubleshooting a problem with the skybox texture in Three.js

I am currently experimenting with creating a basic Skybox using Three.js, but I've encountered an issue where the texture I'm applying to the cube is only visible on the outside and not on the inside. Below is the code for my skybox: const path ...

javascriptwebglthree.js

Having trouble finishing the npm installation process

Having trouble with completing 'npm install'. Can someone please assist me?</p> <pre><code>Encountering a warning about an old lockfile while running npm install. The package-lock.json file was created with an outdated version o ...

javascriptnode.jsnpm

Using Javascript, dynamically add multiple values to a key within a loop

In my code, I am trying to create an object for the frontend using a loop. Within the loop, variables are set for user, hours, and timestamp, which I want to use to dynamically build the new object. This is what I have attempted so far, but it's not ...

javascriptarraysjsonjavascript-objects

Limitations of Typescript's Index Signature Templates

Currently, I have some Typescript Interfaces with repeated and similar fields. Here's an example: interface Foo { person1Name: string; person1Address: string; person2Name: string; person2Address: string; category: string; department: ...

javascripttypescripttypescript-typings

The @ViewChild arguments were incorrectly specified, causing issues with the functionality of ngAfterViewInit

I have been following the step-by-step instructions provided here, but I am encountering issues with @ViewChild and ngAfterViewInit. The error message I am receiving indicates that I am missing an argument. Even after attempting to add two arguments as sho ...

angularpaginatorviewchild

Securing Angular 2 routes with Auth Guard through canActivate

I've been searching for a solution to this problem for the past 4 hours with no luck. I have multiple Authguards set up, and I want to instruct the router to grant permission if any of them are true, rather than requiring all guards to be true. Curre ...

angulartypescriptangular2-routingroutercanactivate

Accessing the Node API with a GET request should be the first step taken before proceeding with

In my front-end setup, I have implemented an interceptor that automatically adds an Authorization header if a JWT token exists. There are 2 APIs in play: one for authorization checks and the other for handling data requests (the focus of my work). My goa ...

javascriptnode.jsapiexpressjwt

Disable the click functionality while preserving the hover feature

Due to my previous question being incorrectly marked as a duplicate, even though it wasn't, and no one is rectifying the mistake, I am re-posting my inquiry. I am dealing with an <a> element that has a default onClick function. This <a> a ...

javascriptjqueryhtmlcss

Creating objects in Angular 2 through HTTP GET calls

Recently, I've delved into learning Angular 2. My current challenge involves making http get requests to retrieve data and then constructing objects from that data for later display using templates. If you believe my approach is incorrect, please feel ...

javascriptangulartypescript

Is there a way in which I could instruct 40 buttons to individually correspond to the table row on which they are placed, without the need for 40 distinct events, using JavaScript and PHP?

Imagine a scenario where there is a large table of products, each row containing the product name, its price, and a "Rebate?" checkbox. For every product in this table, there are two corresponding values: fullPrice and rebatePrice. If the "Rebate?" checkbo ...

javascriptphpjquery

Dealing with all errors across all pages in Angular using a comprehensive error handling approach

I am currently using AngularJS and attempting to capture all errors across all pages. However, I am encountering an issue where it does not catch errors in some instances. For example, when I trigger a ReferenceError in one of the controllers, it is not be ...

javascriptangularjs

Error 404: The requested resource could not be located on the server running nginx with Angular version 8

Encountering an issue where trying to access `mywebsiteurl/radar-input` or `mywebsiteurl/daily-submissions` results in a `404 Not Found` error. The components load correctly without using the routing method, indicating the problem might lie there. Below is ...

angularnginxangular-ui-routerangular-routing

What is the best method for initializing a grid combo box value using JavaScript?

How do I set the value of a combobox in a grid itemtemplate using JavaScript? <telerik:GridTemplateColumn AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" DataField="FAULT" FilterControlWidth="100%" ...

javascriptasp.nettelerikrad-controls