Angular: Show/hide selected rows with click event

Question

I have a table in which I'm showing some data for each selected row like this

<table>
    <th>Col-1</th>
    <th>Col-2</th>
    <th></th>
    <tr *ngFor="let obj of data; let i=index">
    <td>{{obj.id}}</td>
    <td>{{obj.name}}</td>
    <button (click)="myFunction(i)">Click</button>
    <br>
    <div>Some dynamic data</div>
    </tr>
</table>

I want to display the div tag content for only clicked row and if I click other row button, that row with div should get displayed and previous div should be hidden. How do I achieve this? Please suggest

you can use a showRow boolean property to each row to toggle between them — Aravind
– Aravind, Commented Mar 1, 2018 at 7:13

David · Accepted Answer · 2018-03-01 07:20:38Z

1

One way to do it:

In your component, declare a variable

visibleRrowIndex: number = null;

In your html

<button (click)="visibleRowIndex=i">Click</button>
    <br>
    <div [hidden]="visibleRowIndex !==i">Some dynamic data</div>

answered Mar 1, 2018 at 7:20

David

34.6k13 gold badges90 silver badges124 bronze badges

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

2 Comments

David Over a year ago

What do you call toggle effect? Like an animation? OP just wants to show/hide rows. Otherwise, he could use classes instead of hidden, and set CSS transitions on the classes

Prasanth S Over a year ago

this is expected answer

Eliseo · Accepted Answer · 2018-03-01 07:53:04Z

1

If you want that a "click" on the same, toggle, change the (click).

<button (click)="visibleRowIndex!==i?visibleRowIndex=i:null">Click</button>

answered Mar 1, 2018 at 7:53

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

2 Comments

thoniv Over a year ago

one small typo i reckon visibleRowIndex !==i ? visibleRowIndex = i : visibleRowIndex = null

Eliseo Over a year ago

::glups:: @thoniv, thanks, but should be visibleRowIndex=visibleRowIndex!==i?visibleRowIndex=i:-1, the ternay operator is: variable=(condition)?value if true:value if false -I know that work your code but we should use the ternary operator to equal a variable-. NOTE: I prefer use -1 when nothing is selected

Collectives™ on Stack Overflow

Angular: Show/hide selected rows with click event

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related