title: Select only one row in mat-table and if select other one then unselect first one
body: <p>I want to implement table with only one row selection. Now i have multiple selection. </p>
  
  <p>I tried coupe ways to do this and i stayed by this one.</p>
  
  <p>Graphic example:
  <a href="https://i.stack.imgur.com/W2WLn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/W2WLn.png" alt="Graphic example"></a></p>
  
  <p><em>component.ts</em></p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { MatDialogRef } from '@angular/material/dialog';
  import { UsersReadRepository } from '../../../../core/services';
  import { MatTableDataSource } from '@angular/material';
  import { User } from 'domain-models';
  import { Observable, Subscription } from 'rxjs';
  import { Subscribable } from 'rxjs/Observable';
  import { SelectionModel } from '@angular/cdk/collections';
  
  @Component({
      selector: 'choose-supervisior',
      templateUrl: './chooseSupervisior.component.html',
      styleUrls: ['./chooseSupervisior.component.scss']
  })
  
  export class ChooseSupervisiorComponent implements OnInit, OnDestroy {
      selectedRow: User;
      isLoading = true;
      dataSource: MatTableDataSource&lt;User&gt; = new MatTableDataSource();
      displayedColumns: string[] = ['name', 'surname', 'phone'];
      subscription$ : Subscription;
  
      constructor(public dialogRef: MatDialogRef&lt;ChooseSupervisiorComponent&gt;, private userReadRepository: UsersReadRepository) {
      }
      onCloseDialog(): void {
          this.dialogRef.close(this.selectedRow);
        }
  
      ngOnInit() {
          this.subscription$ = this.userReadRepository.getSupervisiorUsers()
          .subscribe(
              data =&gt; 
              {
                  this.isLoading = false,
                  this.dataSource.data = data;
              }
          )
      }
      highlight(highlighted: boolean) {
          highlighted = !highlighted;
        }
  
      getSupervisiorRecordFromTable(user: User){
          this.selectedRow = user;
      }
  
      ngOnDestroy() {
          this.subscription$.unsubscribe();
      }
  }
  </code></pre>
  
  <p><em>component.html</em></p>
  
  <pre><code>&lt;h2 mat-dialog-title&gt;{{'insideChats.chooseSupervisiorHeader' | translate}}&lt;/h2&gt;
  &lt;mat-divider&gt;&lt;/mat-divider&gt;
  &lt;div mat-dialog-content&gt;
      &lt;mat-table #table [dataSource]="dataSource" class="mat-elevation-z8"&gt;
          &lt;ng-container matColumnDef="name"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; Name &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let user"&gt; {{user.name}} &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef="surname"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; Surname &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let user"&gt; {{user.surname}} &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef="phone"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; Phone &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let user"&gt; {{user.phone}} &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
          &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
          &lt;mat-row *matRowDef="let row; columns: displayedColumns;" 
          (click)="getSupervisiorRecordFromTable(row)"
          [ngClass]="{hovered: row.hovered, highlighted: row.highlighted}" (click)="row.highlighted = !row.highlighted" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"&gt;&lt;/mat-row &gt;
      &lt;/mat-table&gt;
      &lt;mat-card class="loading-spinner" *ngIf="isLoading"&gt;
    &lt;mat-progress-spinner 
      color="primary" 
      mode="indeterminate"&gt;
    &lt;/mat-progress-spinner&gt;
  &lt;/mat-card&gt;
  &lt;/div&gt;
  &lt;mat-divider&gt;&lt;/mat-divider&gt;
  &lt;div mat-dialog-actions&gt;
      &lt;button mat-dialog-close (click)="onCloseDialog()" mat-icon-button color="warn"&gt;
          &lt;mat-icon&gt;close&lt;/mat-icon&gt;
      &lt;/button&gt;
          &lt;span class="buttons-spacer"&gt;&lt;/span&gt;
      &lt;button mat-button class="choose-button"&gt;{{'insideChats.chooseSupervisiorStartChat' | translate}}&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>component.scss</em></p>
  
  <pre><code>.loading-spinner{
      display: flex; 
      justify-content: center; 
      align-items: center;
  }
  
    .buttons-spacer {
      flex: 1 1 auto;
    }
  
    .mat-dialog-actions {
      justify-content: flex-end;
    }
  
    .basic-container {
      padding: 5px;
    }
  
    .mat-row.hovered {
      background: #eee;
    }
  
    .mat-row.highlighted {
      background: #999;
    }
  
    mat-cell.mat-cell, mat-header-cell.mat-header-cell {
      overflow: visible; 
    }
  </code></pre>
  
  <p>How to implement row selection with unsellecting the last one clicked selection and then this same with other clicking.</p>
  
  <p>The point is just always available select only one row.</p>