Utilize ngFor in Angular Ionic to dynamically highlight rows based on specific criteria

I'm working on an application where I need to highlight rows based on a count value using ngFor in Angular.

After trying different approaches, I was only able to highlight the specific row based on my count. Can someone please assist me?

Check out my code here

If my count value is 3, I want to highlight rows with indexes 0, 1, and 2.

Answer №1

Modify the line

[ngClass]="(count-1==i)?'newMsg':'oldMsg'"
to
[ngClass]="(count-1>=i)?'newMsg':'oldMsg'"

Answer №2

In addition, you have the option to send a function as shown below:

[ngClass]="isMessageNew(i)?'newNotification':'oldNotification'"

Within the component file:

isMessageNew(idx) {
      if (idx < this.messageCount) {
        return true;
      }
      return false;
    }

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

How can you change the list-style-type to switch between lower-alpha and decimal on nested items within an ordered list?

I am attempting to reverse the list-style-type of nested items within an ordered list, including sub-items and sub-sub-items. I have tried using CSS counters but it doesn't seem to be working. Can anyone point out what I might be doing incorrectly? ol ...

Swap out flash for javascript

I am embarking on a new task: replacing the flash element with JavaScript on this page: (switching images for buttons for each image) Naturally, it must maintain the same appearance and functionality. I have come across some jQuery modules that achieve s ...

Having trouble with a JQuery ajax post to a PHP server - receiving the error message "SyntaxError: Unexpected token < in JSON at position 0"

I am attempting to transmit json data to a server and retrieve a json response. My code is displayed below: JS: function login() { console.log("clicked"); //gather form values into variables var email = $("#email").val(); var password = $("#password"). ...

Optimizing logical expressions in C++

Can I assume in C, C++, JavaScript, or any other modern language that if I have the following code snippet... bool funt1(void) {…} bool funt2(void) {…} if (funt1() && funt2()) {Some code} ...I am guaranteed that both functions will be called, ...

Preserving state during navigation and router refresh in Next.js version 13

In the component below, we have a Server Component that fetches and renders data. When router.refresh() is called on click, it reruns the page and refetches the data. However, there is an issue with Nextjs preserving the state. Even though the server compo ...

Transferring data between jQuery and other global JavaScript variables

I'm facing a challenge when trying to make functions I created in jQuery access JavaScript values defined elsewhere. For instance, I have a function set within my jQuery code. var parentImg = ''; //global variable. $(document).change(funct ...

Using a curly brace in a React variable declaration

After completing a react tutorial, I started customizing the code to suit my requirements. One specific section of the code involved a component that received a parameter called label. render() { const { label } = this.props; ... } For instance, I re ...

Maximizing the potential of Bootstrap slider within OpenCart

Has anyone attempted to use Bootstrap slide with the Opencart slideshow module? Here is my code, but I am getting all active classes. Can someone please help me with this? <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"& ...

Exploring the world of design with React JS and MUI's diverse styling options

Exploring the various styling options offered by MUI From useTheme, styled, makeStyles to other methods - what sets them apart and how do they differ in use cases? We're looking for a comprehensive breakdown of their unique features, practical appli ...

Performing a function when text is clicked: Utilizing AngularJS

My goal is to trigger a specific controller method upon clicking on certain text. This function will then make remote calls to another server and handle the display of another div based on the response. Additionally, I need to pass parameters to this funct ...

encountering difficulty with loading JavaScript code while customizing form fields in Symfony/Sonata Admin

I have been attempting to personalize a field in a form created with the Sonata Admin Bundle. I followed the solution provided in this article: Customize form field rendering. Apart from customizing the form field, I also aimed to implement an autocomple ...

The difference in percentage padding rendering is specific to Firefox only

In my current project, I have created various responsive boxes for displaying news articles on the website. Everything seems to be functioning well except for the news items within the slider at the top of the main content. Surprisingly, they are displayin ...

The power of Typescript shines in its ability to ensure type safety when working with conditional

I am struggling with typing a simple function in Typescript that takes a union type and a boolean as parameters. Here is the code snippet: type A = 'a' | 'A'; function f(a: A, b: boolean): string { if (b) { switch (a) { ...

What could be the reason for the Angular2 Component property not appearing on my webpage?

Here is the code snippet I am working with: import {Component} from "@angular/core"; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{secondTitle}}</h2> <main-page></ma ...

Retrieving desired route in Angular 2 RC5 within canDeactivate function

Is there a way to retrieve the desired route within the CanDeactivate guard of the Angular 2 RC5 router? I came across a solution for a similar scenario involving CanActivate (CanActivate), but it doesn't seem to apply to CanDeactivate. My specific s ...

Utilizing various colors for tooltipFontColor in Chart.js

I'm trying to customize the font color for tooltip labels in Chart.js, but I want to set different colors based on certain conditions. Specifically, I want the label color to be white by default, but change to red if a condition is met. I've look ...

Issue with Vue.js - Double curly braces not rendering data on the page

I've recently delved into the world of vue.js Strangely enough, the double curly braces syntax doesn't seem to be rendering for me. However, when I utilize the v-text directive, everything falls into place. Here's a snippet of my code: HTM ...

The useEffect function is repeatedly making API calls within a component, despite not having any dependencies specified

As a newcomer to React.Js, I'm encountering an issue with useEffect repeatedly calling an API without any specified Dependency. Is there another approach I should consider? The relevant file is located at: /pages/dashboard/speaking/[slug].js } else i ...

Implement a bootstrap modal to pop up upon successful form validation using the formvalidation.io

Dealing with a form that can take a significant amount of time to submit due to posting data to multiple APIs is not uncommon. Normally, I display a message in a bootstrap modal asking the user to wait patiently without clicking the back button. This modal ...

Tips for handling a function only after the model window has returned a promise in Angular 2

When a button is clicked, three functions are called in sequence within a promise. The first function is responsible for blocking a model window and returning a promise which then resolves the next function. The HTML code snippet is as follows: ...