Choose a specific div element from a collection of dynamically generated divs in Angular

Question

Choose a specific div element from a collection of dynamically generated divs in Angular

I have been working on a code to dynamically generate div elements using the *ngFor directive. Here is what I have so far:

<div *ngFor = "let item of Items">
<p>Item : {{item}} </p>
</div>

The challenge I encountered is that when I hover over a specific div, I want only that particular div to be highlighted with a background color.

If I use the mouseenter attribute on the div tag, it highlights all the div elements instead of just the one I hovered over.

<div (mouseenter)="hovered=true" 
           (mouseleave)="hovered=false" 
           *ngFor="let item of Items"  
           [style.background]="hovered? 'red' : none">
        <p>Item: {{item}}</p>
    </div>

Does anyone know how to achieve this?

html css angular typescript css-selectors

Answer 1

Answer №1

I'm curious about how your *ngFor directive works because you're using let item in Items instead of let item of Items (it should be of, not in).

app.component.html

<div *ngFor = "let item of Items">
  <p> Item: {{item}}  </p>
</div>

app.component.css

div:hover{
  background-color: yellow;
}

Check out the working Stackblitz here.

Edit:

In response to your updated question, you are applying hover styles to all elements instead of each individual element. To achieve this, you can use the following approach:

<div (mouseenter)="hover=i" (mouseleave)="hover=-1" *ngFor = "let item of Items;let i = index"
       [style.background]="hover=== i ? 'red' : none">
  <p> Item: {{item}}  </p>
</div>

Now you can achieve the desired behavior without using CSS, and see a working example by clicking on the link below.

View the edited Stackblitz here.

Answer 2

I'm curious about how your *ngFor directive works because you're using let item in Items instead of let item of Items (it should be of, not in).

app.component.html

<div *ngFor = "let item of Items">
  <p> Item: {{item}}  </p>
</div>

app.component.css

div:hover{
  background-color: yellow;
}

Check out the working Stackblitz here.

Edit:

In response to your updated question, you are applying hover styles to all elements instead of each individual element. To achieve this, you can use the following approach:

<div (mouseenter)="hover=i" (mouseleave)="hover=-1" *ngFor = "let item of Items;let i = index"
       [style.background]="hover=== i ? 'red' : none">
  <p> Item: {{item}}  </p>
</div>

Now you can achieve the desired behavior without using CSS, and see a working example by clicking on the link below.

View the edited Stackblitz here.

Answer 3

Answer №2

Utilize the CSS :hover pseudo-class to create hover effects on elements.

html

<div *ngFor="let item of items">
  <p class="hover-target">Item : {{item}} </p>
  <p>footer</p>
</div>

css

.hover-target:hover {
  background-color: red;
  /* add any styles you want to apply */
}

Note - Be cautious of your *ngFor syntax. It should be *ngFor="let item of Items"

DEMO: https://stackblitz.com/edit/angular-kp4zfv

Answer 4

Utilize the CSS :hover pseudo-class to create hover effects on elements.

html

<div *ngFor="let item of items">
  <p class="hover-target">Item : {{item}} </p>
  <p>footer</p>
</div>

css

.hover-target:hover {
  background-color: red;
  /* add any styles you want to apply */
}

Note - Be cautious of your *ngFor syntax. It should be *ngFor="let item of Items"

DEMO: https://stackblitz.com/edit/angular-kp4zfv

Choose a specific div element from a collection of dynamically generated divs in Angular

Answer №1

Answer №2

Similar questions

Unable to locate a resolution for the error message "Warning: Task "uglify" not found"

Header escapes div and continues to move

Unable to retrieve content in NGX-Quill upon submission

Using Inheritance to Create Custom Event/Callback Handlers in TypeScript

Adjusting the height of a Vue component to 100% triggers a change in height whenever a re-render occurs

Having trouble with refreshing the div content when using jQuery's $.ajax() function

Failed to add a new entry to the Sharepoint 2013 List

Break down the organization of CSS

Troubleshooting: Why the TableTools basic usage example is not functioning as

Helping React and MUI components become mobile responsive - Seeking guidance to make it happen

Can the <container> block be positioned beneath the <header> block?

To prevent the background image (blue border) from shifting, I need to extract the list item element without causing the image to

Angular: Automatically close the side navigation menu when a user clicks anywhere outside of it in the screen

Dynamic TypeScript property that can only be assigned values from an array during runtime

Unable to render a stationary image located within the component's folder in Angular

Tips for integrating TypeScript with Vue.js and Single File Components

Is it possible to remove a particular div after clicking the delete button, especially if multiple divs are displayed upon clicking the add

When using Typescript, the keyof operator for objects may not undergo refinement and can result in error

"Apply a class to a span element using the onClick event handler in JavaScript

Creating a Full Page Background Image That Fits Perfectly Without Resizing or Cropping