Highlight list item and remove with Angular2

Question

I have a list of items and when the user clicks on an item, this item gets highlited. We do this by simple adding *ngIf="object.shouldHeight" and works.

My Problem:

When the user clicks on another item, the previous selected item should be unhighlighted

My first idea for the solution:

The first solution I thought was to iterate through all items, change their status to false and then set the current status to true. This would work!

My second idea for the solution:

The other was to use this, but this is not working as toogle, means, when I click on a next item, the previous one is still highlighted.

How can I achieve this in Angular2 without writing loops in my code?

UPDATE:

I achieved this, althought I still think it could be more elegant:

In my component I have the following function:

public showButtonbar(i: number) {
    this.hightlightStatus = []
    this.hightlightStatus[i] = true;
}

And that is my click event, where i is the index:

(click)="showButtonbar(i)"

Maxim Egorushkin · Accepted Answer · 2016-08-02 17:01:39Z

0

Bind list item's CSS class, so that when the condition is true Angular2 adds that CSS class, that defines highlited item style.

E.g.:

<tr *ngFor="let row of rows; let rowIdx = index;"
  [class.myhighlight]="rowIdx === highlightRowIdx">
</tr>

The above adds CSS class myhighlight to the table row when the row index is equal to highlightRowIdx member variable of the model/controller.

answered Aug 2, 2016 at 17:01

Maxim Egorushkin

138k19 gold badges201 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DAG Over a year ago

What about the click event? Where does it take place and what should I set to it?

O.DO · Accepted Answer · 2017-10-24 13:11:53Z

0

Here is a short list-component-guide. This component is also able to hightlight the selected element. Maybe you can find some help there.

answered Oct 24, 2017 at 13:11

O.DO

711 silver badge2 bronze badges

Collectives™ on Stack Overflow

Highlight list item and remove with Angular2

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related