Add a class to a particular element within an ngFor loop

I wrote a loop that creates names along with icons.

My goal is to make the icon appear only when it is hovered over.

<div class="elm" *ngFor="let element of callWorkflowData?.jobsList">
    <mat-card (mouseover)="hover=true" (mouseleave)="hover=false">{{element}}
        <mat-icon [ngClass]="hover?'show-icon':'hide-icon'" ng aria-hidden="false" aria-label="Example home icon">add</mat-icon>
    </mat-card>

</div>

Currently, the icon shows up on all cards in the list when I hover over just one element.

My intention is for the icon to only display on the element being hovered over.

htmlcssangularngfor

Answer №1

Your original code applies the same condition to the class binding for all icons, causing them to change simultaneously.

To address this issue, consider adding a hoverElement property to the component class. This property would be assigned the hovered element on mouseover and cleared on mouseleave. The class binding condition can then compare the element variable with the hoverElement:

<div class="elm" *ngFor="let element of callWorkflowData?.jobsList">
  <mat-card (mouseover)="hoverElement = element" (mouseleave)="hoverElement = null">{{element}}
    <mat-icon [ngClass]="hoverElement === element ? 'show-icon' : 'hide-icon'" ...>add</mat-icon>
  </mat-card>
</div>

Check out the demonstration in this StackBlitz.

Alternatively, you can achieve the same effect using CSS and the :hover selector:

mat-card mat-icon {
  color: orange;
}

mat-card:hover mat-icon {
  font-weight: bold;
  color: darkgreen;
}

View the example in this StackBlitz.

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

Here's a way to align big text in the center while aligning small text at the bottom

How can I position two text blocks on the same line in HTML, with one text block having a larger font size and vertically aligned in the middle, while the other text block sits lower to create a cohesive design? To better illustrate what I mean, I have cre ...

htmlcssvertical-alignmentfont-size

Develop a custom content management system that utilizes GET parameters for enhanced functionality

Creating a news system for is my current project and it consists of 3 main pages: index.php | This page displays the latest news and allows users to select which article to read article.php | Users can view the full news post on this page post.php | Thi ...

phpjqueryhtmlcss

Instructions on connecting something from manifest.json

I've encountered a dilemma while using Webpack with the CleanWebpackPlugin. Since I am utilizing an index.php file, I cannot make use of HtmlWebpackPlugin. After some research, I came across an alternative plugin known as WebpackManifestPlugin. This p ...

phphtmljsonwebpack

Align pandas data frame to the right within a Flask application

My current project involves creating an API in Flask. One of the requirements is to display a pandas dataframe right next to the upload button on the web page. While I have been able to find information online about justifying column headers or text, I hav ...

pythonhtmlcsspandasflask

Arranging multiple Label and Input fields in HTML/CSS: How to create a clean and

I'm struggling with HTML and CSS, trying to figure out how to align multiple elements on a page. I've managed to line up all the rows on the page, but for some reason, the labels are appearing above the input fields when I want them to appear be ...

javascriptjqueryhtmlcss

What is the reason for the ngFor loop in Ionic 5 component not functioning properly?

I'm facing an issue with the *ngFor directive in one of my components. It's strange because it works fine in other components. Can anyone help me figure out what I might be doing wrong? @Component({ selector: 'app-age-picker', temp ...

angularionic-framework

Simple Solutions for Moving Containers Up in Angular When Clicked

In the left side container, I have a header and sub-header, while the right side container contains text. However, whenever I click on the sub-header to display text on the right side, both container positions shift upward, hiding the header text. I'm ...

htmlcssangulartypescriptscroll

Issue with Bootstrap container's max-width not functioning

After implementing the code in the following manner: <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"> <style type="text/css"> .con ...

htmlcsstwitter-bootstrap

Top methods for integrating custom divs into your WordPress site using PHP

As someone who is new to wordpress, I have a solid understanding of php, html, css and javascript. I am interested in integrating a custom font resizer into my wordpress site similar to the example shown below: https://i.stack.imgur.com/FwoIJ.jpg What w ...

phphtmlcsswordpress

Is there a way for me to set a variable in my component with a value from the Angular Material autocomplete feature?

I am currently in the process of constructing a form to generate a POST request to the API. I have opted to utilize Angular Material 4 and incorporate the Autocomplete component provided by Material Design. Below is the code snippet displaying my HTML Com ...

angulartypescriptautocompleteangular-material2

Positioning an absolute div inside a relative div within a v-for loop while using VueJS and Element UI

I am experimenting with rendering a list of <el-card> items using a transition-group. Each card has a front and back side that flip when a button is clicked. To achieve a smooth flip transition, I need to apply the style: position: absolute; top: 0; ...

cssvue.jselement-ui

mobile screens causing bootstrap columns to overlap

The code I am working with is shown below: <div class="container"> <div class="col-md-3 calendar"> </div> <div class="col-md-9"> <button></button> (more buttons...) </div> < ...

htmlcssbootstrap-4

Navigation that remains fixed while scrolling

Can someone help me fix the side navigation of this template to stay fixed when a user scrolls past it for easier navigation? I'm struggling with the code and could use some fresh eyes to look at it. I just can't seem to figure it out on my own, ...

jqueryhtmlcss

iPhone height is not correct

One issue I faced was when trying to view a webpage in landscape mode on iPhones (specifically testing on model SE, but it appears that many people are experiencing the same problem with other iPhone models). I have created a simple example below, consist ...

javascripthtmlcssiphonemobile

Oops! The program encountered an issue where it was unable to access the properties of an undefined variable, specifically while trying to

When creating a custom validation function in Angular, I encountered an issue where using a variable within the validation would result in an error: "ERROR TypeError: Cannot read properties of undefined (reading 'file')". This occurred when chang ...

javascriptangulartypescriptasynchronouscustomvalidator

Implementing two background images and dynamically adjusting their transparency

With the challenge of loading two fixed body background-images, both set to cover, I encountered a dilemma. The text on the page was extending below and scrolling, along with top and bottom navigation icons. As expected, the second background covered the f ...

javascripthtmlcss

Just starting out with json/ajax and I received an error in the Console that says: Uncaught TypeError: Cannot read property 'length' of undefined

I’m encountering an issue with my code. I must emphasize that I’m brand new to this, so please bear with me if the solution is simple. I did attempt to solve it myself before reaching out for help and searched through various posts with similar errors, ...

javascripthtmlajaxjson

Why must I handle Access-Control-Allow-Origin issues with XMLHttpRequest() but not with forms?

When attempting to make a request using XMLHttpRequest(), I encounter the Access-Control-Allow-Origin error. However, when I use a form like the one below, no issues arise. Is there something about forms that allows access? What could be the reason for t ...

javascripthtmlxmlhttprequestcorscross-domain

encountering difficulties resolving dependency tree when attempting to generate a new Angular project

Today, I attempted to start a new Angular project using the command ng new <projectname>, but encountered the following error: npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Foun ...

angularnpm

Confirmation in Sweet Alert before deleting an item in Angular 2

Currently, I am facing an issue with my AlertService that uses Sweet Alert. My goal is to confirm whether the user truly wants to delete something before proceeding with the action. Despite utilizing arrow functions and attempting bind(), I am encountering ...

angulartypescriptangular2-servicessweetalert