Upon hovering, icons for each project name are displayed when `mouseenter` event is triggered

My issue lies with the mouseenter function. I am trying to display icons specific to the project name I hover over, but currently, it displays icons for all projects at once. I want each project hovered over to show me its respective icons

Below is some code: This is .ts

 showIcons(project: Project) {
 this.isIconsVisible = !this.isIconsVisible;

This is in html

 <td (mouseenter)="showIcons()" (mouseleave)="showIcons()">
 {{project.name}}
 <div class ="row" *ngIf="isIconsVisible">
 <div class="fa fa-edit clickable edit-icon" (click)="editProject()">
 </div>
 <div class="fa fa-pencil clickable fa-fw" 
 (click)="openprojecteditdialog(project)"></div>
 <div class="fa fa-trash-o clickable delete-icon" 
 (click)="deleteProject(project)"></div>
 <div class="fa fa-files-o clickable copy-item" 
 (click)="copyProject(project)"></div>
 </div>
htmlcssangulartypescript

Answer №1

It seems that the issue lies in using a single variable (isIconsVisible) for all projects. The better approach would be to assign isIconsVisible as a property to each individual project and then manipulate it accordingly.

 <td (mouseenter)="showIcons()" (mouseleave)="showIcons(project)">
    {{project.name}}
    <div class ="row" *ngIf="project.isIconsVisible">
       <div class="fa fa-edit clickable edit-icon" (click)="editProject()">
       </div>

Take a look at your showIcons function below:

showIcons(project: Project) {
 if(!project.isIconsVisible) {  // This will also check if the property is null 
    project.isIconsVisible = true;
 } else {
    project.isIconsVisible = false;
 }
 // project.isIconsVisible = !this.isIconsVisible;

Alternatively, you can initialize all project.isIconsVisible properties to false initially so you can simply use 

project.isIconsVisible = !this.isIconsVisible;

Answer №2

Did you perhaps overlook adding the project in the showIcons function?

<td (mouseenter)="showIcons(project)" (mouseleave)="showIcons(project)">

I'm not very familiar with Angular, though...

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

Offering a limited selection of generic type options in TypeScript

Is there a shorthand in TypeScript for specifying only some optional types for generic types? For example, let's say I have a class with optional types: class GenericClass<A extends Type1 = Type1, B extends Type2 = Type2, C extends Type3 = Type3> ...

typescripttypescript-generics

Can the top header stay fixed to the top of the screen even when scrolling down?

Code snippet: http://jsfiddle.net/R3G2K/1/ In my project, there are multiple divs with content and each div has a header. My goal is to make the last header that goes out of viewport "sticky" or fixed at the top. I have explored various solutions for thi ...

javascriptjqueryhtmlcss

The clash between React Inline styles and Client CSS can lead to conflicts in styling

Our application needs to be loaded into the client's page, which is built using React. We are implementing React Inline Styles by defining styles as objects. However, we have encountered an issue where any CSS specified by the client using tag attribu ...

javascriptjquerycssreactjs

include the ReactToastify.css file in your project using the import statement

Error in file path C:\Users\User\Documents\GitHub\zampliasurveys_frontend\node_modules\react-toastify\dist\ReactToastify.css:1 ({"Object.":function(module,exports,require,__dirname,__filename,jest){:ro ...

javascriptreactjstypescriptunit-testingjestjs

Tips for troubleshooting an Angular error when no specific information is provided

I'm encountering an error `ERROR Error: "[object Object]" in my console and my app is displaying a white screen. Everything was working perfectly fine before, and I can't pinpoint any changes that may have caused this issue. The error appears to ...

javascriptangulardebugging

jQuery fails to apply a class if the input fields are not empty

I am currently working on a function that displays a login button only when both input fields are not empty. However, for some reason, jQuery seems to be giving me trouble with this task. Despite checking and ensuring that I am using the correct and updat ...

jqueryhtml

Is it possible to utilize the spread operator for combining arrays?

Consider two different arrays represented by variables a and b. The variable c represents the output as a single array, indicating that this method combines two or more arrays into one. let a=[a ,b]; let b=[c ,d]; c=[a,...b] The resulting array will be: ...

javascriptangularangularjstypescript

Using an overlay with figure-img in Bootstrap 4 is a visually appealing design

I need assistance with adding an overlay to only the bootstrap 4 figure-img. In order to achieve this, I inserted a div with the class overlay beneath the figure-img. Below is the code snippet: <div class="col-md-4"> <figure class="service tex ...

htmltwitter-bootstrapcssbootstrap-4

Leveraging Class Types with Generics

Take a look at this example: https://www.typescriptlang.org/docs/handbook/2/generics.html#using-class-types-in-generics To make it work, I just need to call a static method before instantiation. Let's adjust the example like this: class BeeKeeper { ...

typescripttypescript-generics

Angular2 - Breaking down applications into reusable components

Utilizing custom properties permits seamless data binding between multiple components. <section id="main"> <app-home [dict]="dict">Hello there!</app-home> </section> In this scenario, dict serves ...

angulartypescriptangular-uiangular2-components

Angular Kendo UI - How to Rotate X-Axis Labels in a Bar Chart

On smaller screens, I am trying to rotate x-axis labels to prevent overlapping. EXAMPLE <kendo-chart *ngIf="!yearLoader" (seriesClick)="barClick($event)"> <kendo-chart-tooltip format="{0} events"></kendo-chart-tooltip> < ...

angularkendo-ui-angular2kendo-chart

How does the size of a font affect the amount of screen space a character occupies in pixels?

I am currently working on a custom user interface that requires precise measurement of how many pixels are taken up by a specific string of text. My attempts to control the character size using the font-size property have been met with unexpected results. ...

htmlcssfonts

When attempting to register a custom Gamepad class using GamepadEvent, the conversion of the value to 'Gamepad' has failed

I have been working on developing a virtual controller in the form of a Gamepad class and registering it. Currently, my implementation is essentially a duplicate of the existing Gamepad class: class CustomController { readonly axes: ReadonlyArray<nu ...

javascripttypescriptgamepad

Automatically include the date as a column heading along with name and ID

I recently came across a guide on how to dynamically add dates as column headers in a table. However, I encountered an issue where I couldn't add new columns for 'Name', 'Age', and 'Section' before the dynamically generat ...

javascripthtmljqueryajaxdatatable

Navigating through the directory to locate the referenced folder in a Types

Is there a way to declare a path to a referenced folder in order to have a more concise import statement using the @resources path? I am building from /server by running tsc -b app.ts The following long import statement works: import IEntity from &ap ...

typescript

Error during Ng 16 upgrade - npm ERR! Peer dependency conflict found: @angular/[email protected]

I am currently in the process of upgrading my Angular version from 11 to 16. While this Angular documentation has been quite helpful, I am encountering various errors and challenges. Let me provide you with the versions I am working with: Angular CLI: 11. ...

angularnpm

Issue occurred while trying to deploy Firebase functions following GTS initialization

Objective: I am aiming to integrate Google's TypeScript style guide, gts, into my Firebase Functions project. Desired Outcome: I expect that executing the command firebase deploy --only functions will successfully deploy my functions even after init ...

typescriptfirebasegoogle-cloud-functions

What is the correct way to utilize Array.reduce with Typescript?

My current approach looks something like this: [].reduce<GenericType>( (acc, { value, status, time }) => { if (time) { return { ...acc, bestValue: valu ...

javascripttypescript

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

After generating a new list item, it appears that the CSS styling is not being inherited until the page is reloaded. Even though I have added styling using cssText dynamically, it doesn't seem to be working as expected. I've attempted using cssT ...

javascriptcss

removing functionality across various inputs

I have a JavaScript function that deletes the last digit in an input field. It works fine with one input, but not with another. It only erases the digit in the first input. <script> function deleteDigit(){ var inputString=docu ...

javascripthtml