Ways to make a chosen row stand out in an *ngFor loop?

Struggling to find a solution within Angular2 for setting a css class when selecting a row. I want to achieve this without relying on jQuery.

<table class="table table-bordered table-condensed table-hover">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Website</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of companies"  (click)="selectedCompany(item, $event)">
            <td>{{item.name}}</td>
            <td>{{item.email}}</td>
            <td>{{item.website}}</td>
        </tr>
    </tbody>   
</table> 

Working with the final release of Angular2

Answer №1

If you're looking for ways to achieve this, one approach is to save the current company when it's clicked on.

Within the *ngFor loop, you can verify if the current item matches the currentCompany, and then add a specific class like highlighted to style it accordingly.

export class TableComponent {

  public currentCompany;

  public selectCompany(event: any, item: any) {

    this.currentCompany = item.name;
  }

}

Then in your HTML template:

<tr *ngFor="let item of companies" (click)="selectCompany($event, item)" 
 [class.highlighted]="item.name === currentCompany">

--

Another method to highlight multiple companies is by adding a highlighted property to each item. When calling selectCompany(), simply set the property to true. Your check would then be

[class.highlighted]="item.highlighted"
.

Answer №2

It's been a while since this question was answered, but just to add on to the solution provided, you can also utilize [ngClass]="{'class_name': item.id === currentCompany }" in your code. You may need to consider removing the table hover effect to ensure that the background color change is visible.

<tr *ngFor="let item of companies" (click)="selectCompany($event, item)" [ngClass]="{'class_name': item.id === currentCompany  }" >

Then apply this CSS:

.class_name{ background-color: yellow; }

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

What could be the reason for the clone function not duplicating the data within the table

Recently, I utilized jQuery's clone method to duplicate and add an HTML table. The rows and cells of the table were added using jQuery. However, despite using clone, it only replicated the headers and CSS, not the appended data. This raises the ques ...

CSS-only: Align items in flexbox column with equal width and centered position, without the need for a wrapper

https://i.stack.imgur.com/vAJv2.png This particular challenge involves creating a responsive mobile menu. In this design, the width of all children is determined by the longest child element. The CSS should ensure that the .index class spans the full wi ...

Representation of a family tree in CSS showcasing multiple sub-parents (both many to one and one to many relationships)

I've come across various family tree presentations. I'm curious if it's possible to display a one-to-many and then many-to-one structure? Currently, the flow is linear stop after stop, but I'd like to incorporate multiple steps that con ...

Executing a script for every row in a table using Python and Selenium

As a newcomer to Python and Selenium, I have been struggling with a specific task for days now. Despite my efforts to search and experiment, I find myself completely stuck. My goal is to access sales records within a table that contains information about ...

Escaping double quotes in dynamic string content in Javascript can prevent unexpected identifier errors

Need help with binding the login user's name from a portal to a JavaScript variable. The user's name sometimes contains either single or double quotes. I am facing an issue where my JavaScript code is unable to read strings with double quotes. ...

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

(UPDATE: Issue Resolved - I discovered that I needed to include the JavaScript within $(document).ready(function()), which was previously missing. The example below worked perfectly for me.) I am attempting to implement a Multi-Level Navbar with Angular 6 ...

color of the foreground/background input in a dropdown menu that

I am attempting to modify the foreground or background color utilized by a dash searchable dropdown when text is entered for searching in the list. The input text is currently black, which makes it extremely difficult to read when using a dark theme. Wit ...

What is the best way to center images horizontally in CSS and HTML?

I'm looking to create a driver's page where the desktop view displays images horizontally instead of vertically. I've tried adjusting the display attribute with limited success, and so far, the grid display is the closest I've come to a ...

Bourbon encountering difficulty with font-face mixin in Rails version 3.2.2

After watching Ryan Bates' screencast on Bourbon, my application.css.scss file looks like this: @import "bourbon"; @import "main"; @import "events"; ..etc. In my main.css.scss stylesheet, I am able to use the @include transition() mixin without any ...

Modify the colors of the chartist fill and stroke using JavaScript

Struggling to dynamically set colors in a chartist graph using JavaScript. How can custom colors be applied through JS? The attempted method below is not successfully changing the color for the showArea in the chartist graph. <!doctype html> <htm ...

Angular 5: Transforming and Concealing CSS Class Names

Can CSS selectors be renamed or obfuscated in an Angular CLI project? Many top websites like Google and Facebook use randomized CSS names for various reasons, such as preventing website scripting through targeting static class names. I would like to imple ...

The Angular Proxy seems to handle GET requests successfully, but encounters issues when it comes to

After setting up a proxy for my requests on my Angular application, I successfully managed to redirect my GET request to http://localhost:3000/api/users. However, the issue arises with my POST request as it continues to go to http://localhost:4200/api/user ...

Are there alternative methods to retrieve the CSS properties of web elements more effectively than relying on selenium?

I have a situation in my code where I need to retrieve the CSS properties of a large number of web elements. Currently, I am using Selenium and the code looks like this: ... node = browser.find_element_by_xpath(xpath_to_node) return {k: node.v ...

How to detect changes in Angular 2 using a separate service

Within my AuthService, I store real-time user data and a method for logging in. When the 'Login' button is clicked, the AuthService is called to retrieve updated user data from the server and update the value of 'this.user'. As a resul ...

In what way are these columns altering their layout without the use of JavaScript?

While I was searching for a solution to organize content based on screen size, I came across this website. The layout of the site changes depending on the size of the browser window. When I resize my browser or view the site on a phone, the large image at ...

The background-size:cover property fails to function properly on iPhone models 4 and 5

I have taken on the task of educating my younger sister about programming, and we collaborated on creating this project together. Nicki Minaj Website However, we encountered an issue where the background image does not fully cover the screen when using b ...

The directive 'ToolBarComponent' has been declared in multiple NgModules causing a conflict

Having trouble deploying my app on netlify, as the deploys keep failing with this error: Error: src/app/components/toolbar/toolbar.component.ts:12:14 - error NG6007: The Component 'ToolBarComponent' is declared by more than one NgModule. The is ...

Need help altering the CSS style of a button once the mouse is released from the :active pseudo class? Look no further!

Is it possible to change the style of an element, such as a button, immediately after the :active pseudo-class is triggered? I noticed that on "Facebook" in their "Sign Up" button, when you click on it and release your mouse, the button background turns ...

What is the meaning of this CSS acronym?

div[id^=picture]:target{ /*applying various styles here*/ } I stumbled upon the snippet of code shown above on a website discussing CSS image galleries. Can anyone clarify what this code accomplishes? Appreciate it. ...

Having trouble loading styles in Vue after publishing to npm

I'm currently using vue-cli3 for the npm publication of a Vue component. Below are my build scripts: "package-build": "eclint fix && vue-cli-service build --target lib --name @xchat-component/chat-component ./src/index.ts & ...