CODEWITHSUNDEEP
angular
pupil
pupil

Reputation: 254

Angular: Show/hide selected rows with click event

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

Upvotes: 0

Views: 2803

Answers (2)

Eliseo
Eliseo

Reputation: 57939

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

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

Upvotes: 1

David
David

Reputation: 34435

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>

Upvotes: 1

Related Questions