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

Navigating user profile routes effectively involves understanding the structure of the application

I'm currently working on developing a user-list feature that will display all users, along with user-detail components for each individual user. My main goal is to restrict access so that only administrators can see the complete list of users, while ...

How can Angular 2 and Firebase be used to search for an email match within all Firebase authentication accounts?

Is there a method to verify the existence of an email within Firebase auth for all registered accounts when users sign up? Can AngularFireAuth be utilized in an Angular 2 service for this purpose? My authentication system is established, but now I am work ...

What is the frequency of page rendering in Angular 2 before displaying it?

I've been working with Angular 2 on a project lately. In my template, I have a simple div that triggers a function in my .ts file to display basic text like so: <div>{{ test() }}</div> test(): void { console.log("Test text") ...

Encountering issues with verifying login credentials in Angular 2

Greetings! I have designed a login page where the user will be logged in if the response is successful, otherwise an error message will be displayed. Below is the JSON data with email and password fields: { Email": "<a href="/cdn-cgi/l/email-protect ...

The H1 tag fails to appear on the webpage

I can't figure out why my H1 is not visible. It seems to be hidden by a div. What's strange is that the parent div is visible when I change the background color to something other than transparent. Even an input tag within the same div displays c ...

Updating Checkbox Appearance in Angular 6 Based on its Checked Status

I have created a checkbox list and I am trying to style the checked item with an underline. Here is my code snippet: TS file: currentQuarter: string; quarters: Observable<MeseRiferimento[]>; q1: MeseRiferimento = new MeseRiferimento(); q2: MeseRife ...

Proper functioning of CSS directional styles is not being achieved

Is there a way to solve the issue of word-wrap and word-break styles not working when adding direction: rtl; in CSS using Pure CSS? Note: Browser support needed for IE9+ and Chrome. #container { height: 440px; width: 150px; left: 40%; top: 20%; border: ...

Exploring the world of Angular CLI testing and the versatility of

Struggling with integrating Angular CLI's test framework and enum types? When creating an enum like the following (found in someenum.ts): const enum SomeEnum { Val0, Val1 } Utilizing it in this way (in app.component.ts): private someEnum = Some ...

How can I add text to an HTML5 SVG similar to using the HTML5 <p> tag?

I am currently working on creating dynamic rectangular boxes and I am facing some difficulties with inserting text into the shapes. The SVG text requires setting x and y coordinates in separate text tags, and doesn't have built-in width and height pro ...

"Incorporate Bootstrap drop-down and button together for a stylish group feature

I am looking to format the code below to resemble the layout shown in the image using Bootstrap 3.3. When there isn't enough space to show all elements in a single line, I want them to stack vertically so that each element utilizes the entire width of ...

Enhancing TypeScript Types with a custom method within an Angular 2 context

I am working on an Angular 2 project using the CLI. Currently, I am trying to add a custom method to the String type as shown below. interface String { customMethod(): number; } String.prototype.customMethod = function() { return 0; } Despite my ...

How to set up Angular 5 with Express

What is the best way to add Angular 5 to an existing Express project? Below are my files: https://i.stack.imgur.com/DPgMs.png Package.json: https://i.stack.imgur.com/iVVxA.png I am looking to integrate Angular 5 into this express project and develop t ...

Navigating back to a specific segment of a dataset while using virtual scrolling

Virtual scrolling is a fantastic way to optimize rendering for large data sets. For this particular scenario, I am making use of the Angular Material CDK APIs to implement this feature. However, a specific requirement needs to be addressed - when a user ...

Is it possible to eliminate the table borders and incorporate different colors for every other row?

Eliminating the table borders and applying color to alternate rows. Check out my code snippet: https://stackblitz.com/angular/dnbermjydavk?file=app%2Ftable-overview-example.ts. ...

Bug Found in AngularJS v1.3.15: Text Color Rendering Glitch on Page Load with WebKit

It appears that the text colors (which should be blue) are not displaying correctly until a user hovers over the text or resizes the window. I attempted to resolve this issue by adjusting the transition property so that it triggers on hover/active states ...

Switch up the Background using .css and jCarousel

I am attempting to create a dynamic gallery using jCarousel and Ajax. The thumbnails are being loaded from a '.txt' file. I am trying to achieve the following effect: When a thumbnail is clicked, the background of the body changes. This action sh ...

Issue with installing firebase-tools through macOS terminal

Having trouble installing firebase-tool for CLI on macOS. Attempts to install using $ sudo npm install -g firebase-tools are resulting in failures. I encountered errors related to permission denied when trying to access directories even with 'sudo&a ...

Alerts created with the AlertController in Ionic 4 Angular are not displaying the message when the

After creating a reliable alert service for my Ionic 4 project, I encountered an issue when building the release version of the app. Despite functioning perfectly in other environments like "ionic serve" and "ionic cordova emulate", the message part of the ...

Having trouble setting up Amazon Cognito Auth JS with an Angular 4 application and a SAML identity provider

I've been working on integrating SAML Service provider with AWS Cognito pool. Despite going through numerous documents and attempting to implement it, I'm facing an issue where the redirection to the Microsoft login page is not happening when I c ...

Retrieve the concealed division element's HTML content along with its formatting

Help needed with appending a hidden div with its styles intact. Despite using the code provided below, the appended div does not retain its styles. Any suggestions for an alternative method? var warningMessage = $('#warningDiv').html() fun ...