title: How can I highlight on mouse click selected row of the table using Bootstrap 4 and Angular 6?
body: <p>I have a Bootstrap table using table-hover and everything works properly <code>.table-hover</code> enables a hover state on table rows within a <code>&lt;tbody&gt;</code>. I also have this method:</p>
  
  <pre><code>listClick(event, newValue) {
      this.UploaderService.getFileName(newValue[1])
  }
  </code></pre>
  
  <p>which sets name of the file from the specified row and then other methods from 
  <code>UploaderService</code> uses this variable to execute specified operations like deleting, uploading etc. </p>
  
  <p>My problem is that everything works fine, unfortunately the line being clicked is not highlighted so the user is not completely aware of the selected row. I would like to leave this line highlighted at the moment of clicking a specific action on this object, such as deleting etc. </p>
  
  <p>Furthermore I would like to have a possibility to select multiple rows using combination for instance of mouse clicking + cmd in case of mac os. Any ideas how can I do this?</p>
  
  <pre><code>&lt;div style="display: block;" class="table-div content table-responsive table-full-width"  &gt;
     &lt;table class="Table table table-hover"&gt;
       &lt;div&gt;
       &lt;thead &gt;
       &lt;tr &gt;
         &lt;th style="width: 20vw; min-width: 150px; text-align: left " *ngFor="let cell of this.UploaderService.tableData2.headerRow"&gt;{{ cell }}&lt;/th&gt;
       &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;/div&gt;
       &lt;tbody style="  overflow:auto; height:60vh; margin-bottom:1vh; display: block; left: 0vw; right: 0vw"&gt;
  
           &lt;tr *ngFor="let item of this.UploaderService.uploader.queue"&gt;
             &lt;td&gt;&lt;button type="button" (click)="item.remove()"&gt;Cancel&lt;/button&gt;
                                               &lt;div class="progress"&gt;
                         &lt;div class="progress-bar bg-success"
                         [ngStyle]="{'width':item.progress+'%'}"&gt;&lt;/div&gt;
                     &lt;/div&gt;
             &lt;/td&gt;
             &lt;td&gt;
             &lt;div &gt;{{item.file.name}}&lt;/div&gt;
           &lt;/td&gt;
             &lt;td&gt;
               &lt;div &gt;{{item.file.size}}&lt;/div&gt;
             &lt;/td&gt;
             &lt;td&gt;
             &lt;div &gt;{{item.file.type}}&lt;/div&gt;
             &lt;/td&gt;
             &lt;td&gt;
               &lt;div &gt;{{item.file.lastModifiedDate}}&lt;/div&gt;
             &lt;/td&gt;
       &lt;tr *ngFor="let row of this.UploaderService.tableData2.dataRows"&gt;
         &lt;td [ngClass]="{'active': selectedItem == cell}" (click)="listClick($event, row)" (dblclick)="listDoubleClick($event, row)"  style="cursor: pointer; width: 20vw; min-width: 150px; text-align: left" *ngFor="let cell of dateFormat(row)"&gt;{{cell}}&lt;/td&gt;
       &lt;/tr&gt;
       &lt;/tbody&gt;
     &lt;/table&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I try like this:</p>
  
  <p>ts:</p>
  
  <pre><code>listClick(event, row) {
  
      row.isSelected = !row.isSelected;
      this.UploaderService.getFileName(row[1])
  
    }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>            &lt;tr *ngFor="let row of this.UploaderService.tableData2.dataRows"&gt;
  
  
                &lt;td [ngClass]="{'active': row.isSelected}" (click)="listClick($event, row)" (dblclick)="listDoubleClick($event, row)"  style="cursor: pointer; width: 20vw; min-width: 150px; text-align: left" *ngFor="let cell of dateFormat(row)"&gt;{{cell}}&lt;/td&gt;
              &lt;/tr&gt;
  </code></pre>