CODEWITHSUNDEEP
htmlcssangulartypescript
JCA
JCA

Reputation: 287

'How to add' mouseover and mouseout on a <tr>?

I've got a table that I need three different links to show up on the specific row that the mouse is hovering over. The links are "View", "Edit", and "Trigger Now". I need this event to happen only on the sessions table. Here's my current HTML: 

<div>
    <h1>Manage Workflows</h1>
</div>
<div class="tablez">
        <table class="table table-hover" id = "groups">
            <thead>
                <tr>
                <th scope="col">Groups</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor = "let row of rows" (click) = "onRowClick(row.id)">
                    <td class="data">{{row.group}}</td>            
                </tr>

            </tbody>
        </table>
        <table class="table" id = "sessions">
                <thead>
                    <tr>
                    <th scope="col">Sessions</th>
                    <th scope="col" id = "trigger">Next Trigger</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor = "let row of tableTwo">
                        <td scope="row">{{row.session}}</td>
                        <td scope="row" id = "trigger" >{{row.nextTrigger}}</td>                 
                    </tr>

                </tbody>
            </table>
    </div>

Upvotes: 0

Views: 1182

Answers (1)

Hitech Hitesh
Hitech Hitesh

Reputation: 1635

You can use mouseover event of the angular

 <tr *ngFor = "let row of tableTwo" (mouseover)="showLinks=true" (mouseout)="showLinks=false" >
                        <td scope="row">{{row.session}}</td>
                        <td scope="row" id = "trigger" >{{row.nextTrigger}} </td>
    <td   *ngIf="!showLinks" scope="row"> View  Edit   Trigger Now links  </td>     
 </tr>

Upvotes: 1

Related Questions