Exploring the capabilities of Angular 9 with mat-table's multiTemplateDataRows feature to enhance the user experience by enabling simultaneous hover effects on multiple rows

Seeking advice as a newcomer to Angular, I am encountering an issue with mat-table and multiTemplateDataRows. Essentially, each element from my data source is displayed on two rows in the table. When I hover over row 1, only row 1 is highlighted, and the same goes for row 2. However, I am looking for a way to have both rows highlight simultaneously. Is there a method to group the two rows for hovering and highlighting purposes?

Below is how I have defined my rows:

<tr mat-header-row *matHeader="displayedColumns; sticky:true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="first-row" (click)="eventPopup(row)"></tr>
<tr mat-row *matRowDef="let row; columns: secondRowColumns;" class="second-row" (click)="eventPopup(row)"></tr>

Thank you in advance for any assistance provided!

cssangularmat-table

Answer №1

Success at last!

Here's the HTML snippet:

<tr mat-header-row *matHeader="firstLineColumns; sticky:true"></tr>
<tr mat-row *matRowDef="let row; columns: firstLineColumns;" class="first-line" [ngClass] = "{'highlight': selectedId == row.eventId}" (mouseenter)="changeColor(row,true)" (mouseleave)="changeColor(row,false)" (click)="eventPopup(row)"></tr>
<tr mat-row *matRowDef="let row; columns: secondLineColumns;" class="second-line" [ngClass] = "{'highlight': selectedId == row.eventId}" (mouseenter)="changeColor(row,true)" (mouseleave)="changeColor(row,false)"  (click)="eventPopup(row)"></tr>

Css breakdown:

.highlight {
background-color: yellow;
}

Let's dive into the Javascript:

selectedId: string = null;

changeColor(row: Event, hovering: true) {
  if (hovering === true) {
    this.selectedId = row.eventId;
  }
  else {
    this.selectedId = null;
  }
}

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

Load information into a different entity

I need help with adding new values to an existing object. When I receive some form data from noteValue, I also have additional input data in my component under person that I would like to integrate into noteValue before saving it. let noteValue = form.va ...

javascriptangulartypescript

Customizing the Style of Mat-Form-Field

I have designed a search bar using mat-form-field and attempted to personalize the appearance. Currently, there is a gray border-like region surrounding the input field and icons. Moreover, clicking on the input field results in a visible border: <form ...

cssangularangular-materialstyling

Visual Studio 2017 experiencing compatibility issues with Bootstrap

I've been working on creating a carousel using bootstrap within Visual Studio 2017. I utilized the NuGet package manager to install jQuery and Bootstrap, and to test its functionality, I generated a bootstrap snippet for the carousel. Take a look at ...

htmlcssbootstrap-4visual-studio-2017

What is the best way to customize the color of the border and icon in an outlined MaterialUI input field

I'm a newcomer to materialUI and I have a question regarding customizing an outlined input field with an icon. Due to my dark background, I need the icon, border, and text color to be lighter, such as grey. Can someone please advise on the materialUI ...

cssreactjsmaterial-ui

Angular 2 component failing to show JSON data

I recently started diving into Spring MVC and Angular 2 while working on a web application as a side project. I've made good progress with the Spring MVC app, but now I want to transition to an Angular 2 front end. Following the quick start guide on A ...

jsonspring-mvcangular

Exploring: Strategies for patiently waiting for a webpage to refresh

Exploring Angular 15 with karma and jasmine When I navigate from one page to another by clicking a button, the TD tags on the new page are not being displayed in my tests. beforeEach(async () => { await TestBed.configureTestingModule({ decla ...

angulartestingjasminekarma-jasmine

Dynamic SVG positioning

Looking for a way to make this svg shape relative to its containing div? Fiddle: http://jsfiddle.net/8421w8hc/20/ <div> <svg viewBox="0 0 1000 2112" style="" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="ma" st ...

javascriptcssxmlsvg

Guide on showing error message according to personalized validation regulations in Angular 2?

Utilizing a template-driven strategy for constructing forms in Angular 2, I have successfully implemented custom validators that can be utilized within the template. However, I am facing an issue with displaying specific error messages associated with dis ...

typescriptangularangular2-templateangular2-directivesangular2-forms

In TypeScript, it can be challenging to determine the equality between a value and an enum

I am encountering an issue with my simple code: enum Color { BLUE, RED } class Brush { color: Color constructor(values) { this.color = values.color } } let JSON_RESPONSE = `{"color": "BLUE"}` let brush = new Brush(JSON.parse(JSON ...

javascriptjsonangulartypescriptenums

What is the best method for showcasing various content using a uniform accordion style in React?

What is the most efficient way to display various content within multiple accordions? view image description here This is the current approach I am taking in my project, where shipping information and delivery options will involve different textboxes, labe ...

javascriptcssreactjstwitter-bootstrap

The Angular Material datepicker seems to be ignoring the limitations set by [min] and [max] restrictions

I have set up a material date picker control named dob as shown below. However, I am facing an issue where the [min] and [max] values set in the HTML are not functioning correctly. The dob control is being validated as soon as the first digit of the date i ...

javascriptangulardatepicker

The string returned from the Controller is not recognized as a valid JSON object

When attempting to retrieve a string from a JSON response, I encounter an error: SyntaxError: Unexpected token c in JSON at position In the controller, a GUID is returned as a string from the database: [HttpPost("TransactionOrderId/{id}")] public asyn ...

c#angulartypescriptasp.net-core

What could be the reason behind Angular2 TestBed's compileComponents failing to locate my templates?

My current project includes a component that I'll refer to as MyComponent. This particular component utilizes my.component.html as its templateUrl. @Component({ selector: "my-component", templateUrl: "./my.component.html", styleUrls: ["./my.com ...

angularkarma-jasmineangular2-testing

Creating a Standard DIV Element (JavaScript Code)

Just a quick question here. http://jsfiddle.net/fkling/TpF24/ In this given example, I am looking to have < div>Bar 1</div> open as default... Any suggestions on achieving that? That would be all for now. Thank you so much! :D The JS script ...

javascriptcss

Checkable Ionic Table

I'm curious about achieving a similar functionality to this example using Angular and Ionic, but without relying on jQuery. Here is the link for reference: Any advice on how to accomplish this would be appreciated. Thank you. ...

angularionic-frameworkionic3

My form does not receive the Bootstrap classes when using the jQuery script

**Why isn't my jQuery script coloring the rows as expected when certain conditions are met (I italicized the specific part of the code)?** Here is the HTML CODE for the POLL: <form id="pollForm" class="mb-4"> <d ...

javascripthtmljquerycssbootstrap-5

Exploring how to replicate background-size: cover with a center position using HTML5's <video> tag

Looking to replicate the effect of background-size: cover on a <video> element. I was able to achieve this with the code below: <video id="videobackground" autoplay="true" loop="true"> <source src="BackgroundFinal2.mp4" type="video/mp4" ...

csshtml

Generate Angular 9 HTML-formatted output with a return function statement

I am currently working on displaying a table using ngFor. I have encountered an issue with one particular column where a string needs to be displayed as two separate lines. I attempted to split the string into two array values using a function, but when re ...

angularstringsplit

Boost website performance with Google Page Speed by optimizing CSS above the fold using this innovative Bootstrap Template Plugin

My Google PageSpeed Insights report suggests that I should place my CSS below the fold. However, Bootstrap is being used as my templating plugin. I am contemplating printing bootstrap.min.css inline on my homepage, but I hesitate because it may lead to i ...

csstwitter-bootstrapgoogle-pagespeed

Setting up ng-bootstrap for your project

I'm currently in the process of trying to incorporate the ng-bootstrap package into my application. To ensure I have all the necessary packages, I've executed npm i and updated both the @angular/core and @angular/cli modules to their latest vers ...

node.jsangularnpm