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

Is there a way to preselect the date in the input field as the default?

<mat-form-field> <input matInput [matDatepicker]="picker1" placeholder="From date: mm-dd-yyyy" name="from_date" [(ngModel)]="callListRequestOb.from_date" maxlength="150"> ...

angularmat-datepicker

Move the accordion slider to the top of the browser

I'm working with an accordion menu that has some long content. To make it more user-friendly, I want to add a slide effect when the accordion items are opened. Right now, if you open the first two menu items, the last item's content is cut off a ...

javascriptjquerycssscrollaccordion

Interpret information in Angular 2 using Typescript

Just starting with Angular (IONIC) and need help. How can I extract the userId or id from this code? his.response = data. //Looking for guidance on accessing Json keys Response : { "userId": 1, "id": 1, "title": "sunt aut facere repellat providen ...

angularjsparsingtypescriptionic-framework

Full-width header with scrollable content within the viewport

Is there a way to make the header and footer expand to 100% width while keeping the middle content width variable? You can view the source at http://jsfiddle.net/9dWcZ/ HTML: <div class="header"> this is header </div> <div class="content ...

cssdomlayout

In jQuery, conditionally nest divs within another div based on a specific requirement

There is a container with multiple nested elements that need to be rearranged based on the value of their custom attribute. The goal is to reorder those elements at the end of the container if their 'data-keep-down' attribute is set to true, usin ...

javascriptjqueryhtml

Navigate to specific location within a hidden overflow

<ul id="the-list" style="overflow:hidden;height:100px;> <li><a id="link1" href="#">Link 1</a></li> <li><a id="link2" href="#">Link 2</a></li> <li><a id="link3" href="#">Link 3< ...

jqueryhtml

When implementing dynatable with Meteor, the outcomes may vary between the demonstration in a fiddle and the actual application

Here is the fiddle I created for this question: https://jsfiddle.net/ereday/82wzwem8/2/ In the fiddle, you'll notice that the table header has a green background. Now, let me share the code snippet from my meteor project: simple-todos.html <head ...

javascriptjqueryhtmlmeteor

Print directly without the need for a preview or dialog box

Is there a way to easily print content with just one click, without having to go through the preview or print dialog box? Here is a snippet of my code: <head> <style type="text/css"> #printable { display: none; } @media print { #non-pr ...

javascriptjqueryhtmlcss

Tips for assigning an ID to a span element within a for loop

I am facing a challenge where I need to assign IDs to span tags that do not have the id attribute. These IDs need to be assigned sequentially by incrementing through a for loop and passing my geneologicalSequenceNumber into each span tag. Can you guide me ...

javascripthtmljquery

What is the best way to focus the video on its center while simultaneously cropping the edges to keep it in its original position and size?

I'm trying to create a special design element: a muted video that zooms in when the mouse hovers over it, but remains the same size as it is clipped at the edges. It would be even more impressive if the video could zoom in towards the point where the ...

javascripthtmlcssvideozooming

Modifying paragraph content with JavaScript based on selected radio button values and troubleshooting the onclick event not triggering

I am working on implementing a language selection feature on my website where users can choose between English and Spanish. The idea is to have two radio buttons, one for each language, and a button. When the button is clicked, the text of the paragraphs s ...

javascripthtmlbuttononclick

Utilizing JavaScript to dynamically set a CSS file from an API in AngularJS

I am currently facing an issue with integrating a CSS file returned by an API into my entire website. Since the URL of the CSS file keeps changing, hard coding the URL is not feasible. While I have successfully implemented this on 'view1', my goa ...

javascripthtmlcssangularjs

Changing Meteor Template to a Node.js/AngularJS Conversion

My current website is built with Meteor using templates structured like this: <body> {{>section1}} {{>section2}} {{>section3}} </body> <template name="section1"> <h1>This is Section 1</h1> </template> ...

htmlangularjsnode.jstemplatesmeteor

Click on a div to smoothly scroll to the top, then automatically scroll to the bottom if already at the top position

I've implemented a JQuery code on my website that allows the page to scroll to the top when clicking on a div with the class of .bottom. The code is working perfectly fine, here it is: function scrollToTop(){ $('.bottom').click(function ...

javascriptjquerycssjquery-animatescrolltop

What is the best way to create a fully clickable navbar item for the Bootstrap dropdown feature?

I'm struggling to make a button in a navbar fully clickable for the dropdown to open. Even when I try adding margin instead of padding, it only makes things worse. Can someone help me figure out what mistake I'm making here? Essentially, my goal ...

javascriptjqueryhtmlcsstwitter-bootstrap

Increase the size of the image while ensuring the content on the right remains proportionate

I have a challenge with managing two different sizes of images (vertical and horizontal) that need to remain the same size. I am attempting to create a container that can hold the image without affecting the surrounding content, while also possibly using o ...

phphtmlcss

The navigation is designed to only show up as I scroll down the page, but ideally it should be visible

I am trying to make the navigation bar appear on page load instead of when I scroll down the page. Currently, I am using this jQuery code: <script type="text/javascript> $(document).scroll(function() { if ($(this).scrollTop() == 20) { ...

javascriptjqueryhtmlcss

Clicking on multiple external links will open them in separate tabs simultaneously

My attempts to find a solution on Google have been fruitless. I am in the process of creating a content aggregator, which is essentially a list of links to external websites. I want each link clicked to open in a new tab. Currently, I am using target="bl ...

html

Error: Unhandled promise rejection: Trying to access a property of null (specifically 'branch') causing a TypeError

While developing a dashboard for an Angular application, I encountered an error when trying to access the dashboard: ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'branch') TypeError: Cannot read propert ...

angularangularjstypescript

Angular Error: Attempting to access property 'then' of undefined object causes TypeError

I am struggling with implementing JHipster Auth-guard. I am facing an issue where canActivate is not triggered for a user without permission for a specific route. I have carefully examined my code, but the console shows that .then() is undefined at the sp ...

angulartypescriptjhipster