title: How to select a row in Angular 5
body: <p>I'm verrryyyyy new to Angular, so please understand me :)</p>
  
  <p>I have a list of users, that are displayed like this:</p>
  
  <p><a href="https://i.stack.imgur.com/5UAIP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5UAIP.png" alt="enter image description here"></a></p>
  
  <p>Here is my HTML:</p>
  
  <p><strong>EDIT - ADDED CRUD BUTTONS :</strong>
      </p>
  
  <pre><code>  &lt;!--Add new button--&gt;
    &lt;button type="button" (click)="AddModal.show()"&gt;
    &lt;/button&gt;
  
    &lt;button type="button" (click)="EditModal.show()"&gt;
    &lt;/button&gt;
  
    &lt;button type="button" (click)="DeleteModal.show()"&gt;
    &lt;/button&gt;
  
  &lt;/div&gt;
  &lt;!--Data Tableq which displays users info--&gt;
  &lt;div class="dash-table-container"&gt;
    &lt;table class="table table-hover"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;
            Name
            &lt;i class="fas fa-sort-amount-down sorting-icon"&gt;&lt;/i&gt;
            &lt;i class="fas fa-sort-amount-up sorting-icon" style="display: none;"&gt;&lt;/i&gt;
            &lt;i class="fas fa-sort sorting-icon" style="display: none;"&gt;&lt;/i&gt;
          &lt;/th&gt;
          &lt;th&gt;
            Position
            &lt;i class="fas fa-sort-amount-down sorting-icon" style="display: none;"&gt;&lt;/i&gt;
            &lt;i class="fas fa-sort-amount-up sorting-icon" style="display: none;"&gt;&lt;/i&gt;
            &lt;i class="fas fa-sort sorting-icon-default"&gt;&lt;/i&gt;
          &lt;/th&gt;
          &lt;th&gt;
           Office
            &lt;i class="fas fa-sort-amount-down sorting-icon" style="display: none;"&gt;&lt;/i&gt;
            &lt;i class="fas fa-sort-amount-up sorting-icon" style="display: none;"&gt;&lt;/i&gt;
            &lt;i class="fas fa-sort sorting-icon-default"&gt;&lt;/i&gt;
          &lt;/th&gt;
          &lt;th&gt;
           Age
            &lt;i class="fas fa-sort-amount-down sorting-icon" style="display: none;"&gt;&lt;/i&gt;
            &lt;i class="fas fa-sort-amount-up sorting-icon" style="display: none;"&gt;&lt;/i&gt;
            &lt;i class="fas fa-sort sorting-icon-default"&gt;&lt;/i&gt;
          &lt;/th&gt;
          &lt;th&gt;
           Salary
            &lt;i class="fas fa-sort-amount-down sorting-icon" style="display: none;"&gt;&lt;/i&gt;
            &lt;i class="fas fa-sort-amount-up sorting-icon" style="display: none;"&gt;&lt;/i&gt;
            &lt;i class="fas fa-sort sorting-icon-default"&gt;&lt;/i&gt;
          &lt;/th&gt;
      &lt;/thead&gt;
      &lt;!--&lt;tfoot&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;--&gt;
      &lt;tbody&gt;
        &lt;tr *ngFor="let u of users; let i=index;"&gt;
          &lt;td&gt;{{u.Name}}&lt;/td&gt;
          &lt;td&gt;{{u.Position}}&lt;/td&gt;
          &lt;td&gt;{{u.Office}}&lt;/td&gt;
          &lt;td&gt;{{u.Age}}&lt;/td&gt;
          &lt;td&gt;{{u.StartDate}}&lt;/td&gt;
          &lt;td&gt;{{u.Salary}}&lt;/td&gt;
        &lt;/tr&gt; 
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;app-product-new #AddModal&gt;&lt;/app-group-new&gt;
  
  &lt;app-product-edit #EditModal&gt;&lt;/app-group-edit&gt;
  
  &lt;product-dialog #DeleteModal&gt;&lt;/touch-dialog&gt;
  </code></pre>
  
  <p>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..</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>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.. </p>
  
  <p>Thanks</p>
  
  <p>Thanks guys!
  Cheers</p>