How to select a row in Angular 5

Question

I'm verrryyyyy new to Angular, so please understand me :)

I have a list of users, that are displayed like this:

Here is my HTML:

EDIT - ADDED CRUD BUTTONS :

  <!--Add new button-->
  <button type="button" (click)="AddModal.show()">
  </button>

  <button type="button" (click)="EditModal.show()">
  </button>

  <button type="button" (click)="DeleteModal.show()">
  </button>

</div>
<!--Data Tableq which displays users info-->
<div class="dash-table-container">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>
          Name
          <i class="fas fa-sort-amount-down sorting-icon"></i>
          <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort sorting-icon" style="display: none;"></i>
        </th>
        <th>
          Position
          <i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort sorting-icon-default"></i>
        </th>
        <th>
         Office
          <i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort sorting-icon-default"></i>
        </th>
        <th>
         Age
          <i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort sorting-icon-default"></i>
        </th>
        <th>
         Salary
          <i class="fas fa-sort-amount-down sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort-amount-up sorting-icon" style="display: none;"></i>
          <i class="fas fa-sort sorting-icon-default"></i>
        </th>
    </thead>
    <!--<tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>-->
    <tbody>
      <tr *ngFor="let u of users; let i=index;">
        <td>{{u.Name}}</td>
        <td>{{u.Position}}</td>
        <td>{{u.Office}}</td>
        <td>{{u.Age}}</td>
        <td>{{u.StartDate}}</td>
        <td>{{u.Salary}}</td>
      </tr> 
    </tbody>
  </table>
</div>
<app-product-new #AddModal></app-group-new>

<app-product-edit #EditModal></app-group-edit>

<product-dialog #DeleteModal></touch-dialog>

I'm wondering how could I select a row from this table using angular? I need that because I want to send that selected row's data to a modal for editing..

EDIT:

So basically, when I select a row and when I click on a EDIT modal I would like to know which row is selected so I can populate modal's data with that informations and save/edit it..

Thanks

Thanks guys! Cheers

Answer 1

Assuming you want that for edit or something , I have added below a button with each row on click of which you will get complete row.

  <tbody>
          <tr *ngFor="let u of users; let i=index;">
            <td>{{u.Name}}</td>
            <td>{{u.Position}}</td>
            <td>{{u.Office}}</td>
            <td>{{u.Age}}</td>
            <td>{{u.StartDate}}</td>
            <td>{{u.Salary}}</td>
            <td> <input type="button" value="Edit" (click)="RowSelected(u)"/></td>
          </tr> 
        </tbody>

RowSelected(u:any){
console.log(u);
}

Update:

If you dont want button on each row and get data of selected row by just clicking on row, below is the code.

<tbody>
          <tr *ngFor="let u of users; let i=index;" (click)="RowSelected(u);">
            <td>{{u.Name}}</td>
            <td>{{u.Position}}</td>
            <td>{{u.Office}}</td>
            <td>{{u.Age}}</td>
            <td>{{u.StartDate}}</td>
            <td>{{u.Salary}}</td>
            </td>
          </tr> 
        </tbody>

For Edit in Question:

After above code in html, in your component.

RowSelected(u:any){
this.selectedUser=u;   // declare variable in component.
}

Again in your modal.

<modal>
<input type="text" [(ngModel)]="selectedUser.Name" />
<input type="text" ([ngModel)]="selectedUser.Position" />
...
...
</modal>