title: Angular Material How do I click on a row in a table and have it return the contents of one particular cell into a variable?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> export interface Statususers 
   {
       sysid:          Number                  ;
       LASTNAME:       String                  ;
       FIRSTNAME:      String                  ;
       FIRST_AND_LAST: String                  ;
       REGISTRATION:   String                  ;
       CHEATER_ID:     String                  ;
       UNIQUE_NUMBER:  Number                  ;
       TYPE:           String                  ;
       PASSWORD:       String                  ;
       USERNUMBER:     Number                  ;
   }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> import { Component }              from '@angular/core';
   import { Input }                  from '@angular/core';
   import { OnInit }                 from '@angular/core';
   import { ViewChild }              from '@angular/core';
   import { AfterViewInit }          from '@angular/core';
   import { Observable }             from 'rxjs/Observable';
   import { DataSource }             from '@angular/cdk/collections' ;
   import { MatPaginator }           from '@angular/material';
   import { MatTableDataSource}      from '@angular/material';
   import { PageEvent }              from '@angular/material';
   import { MatSort }                from '@angular/material';
   import { HttpClientModule }       from '@angular/common/http';
   import { HttpClient }             from '@angular/common/http';
   import { Statususers }            from '../../models/statususers.model';
  
   @Component({
     selector: 'app-statususers',
     templateUrl: './statususers.component.html',
     styleUrls: ['./statususers.component.css'], 
   })
   export class StatususersComponent implements OnInit, AfterViewInit 
   {
     displayedColumns  = [ 'registration', 'type'] ;
     dataSource        = new MatTableDataSource &lt;Statususers&gt;() ;  
     aircraftreg: string = 'None' ;
  
     @ViewChild(MatSort) sort: MatSort ;
     @ViewChild(MatPaginator) paginator: MatPaginator;
  
     constructor( private http: HttpClient  ) { }
  
     ngOnInit()                    // 'https://jsonplaceholder.typicode.com/users' 
      { 
        this.http.get&lt;Statususers[] &gt; ('http://huckleberrypp.com/angular/php/status_users.php').subscribe (statususers =&gt; { this.dataSource.data = statususers ;  } ) ;
      }  
  
     ngAfterViewInit()  
     {
       this.dataSource.sort      = this.sort ;
       this.dataSource.paginator = this.paginator ;
     }
  
     doFilter (filterValue: string ) 
     { this.dataSource.filter = filterValue.trim().toLowerCase() ; }
  
   selectRow(row) 
    {
    // alert(row['registration']);
     console.log(row['registration']);
    //  this.aircraftreg = 'C-GHHZ'   ;
      this.aircraftreg = (row['registration']);
  
    }
  
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="myAircraftBrowse"&gt;  
     &lt;div class="example-header"&gt;
       &lt;mat-form-field&gt;
         &lt;input matInput type= "text" (keyup)="doFilter($event.target.value)" placeholder="Enter aircraft filter here"&gt;
       &lt;/mat-form-field&gt;
     &lt;/div&gt;
  
     &lt;h1 class="centerText"&gt; {{aircraftreg}} &lt;/h1&gt;
  
     &lt;div class="example-container mat-elevation-z8"&gt;
       &lt;mat-table #table [dataSource]="dataSource" matSort&gt;
         &lt;!--- Note that these columns can be defined in any order.  The actual rendered columns are set as a property on the row definition" --&gt;
  
         &lt;!-- Registration Column --&gt;
         &lt;ng-container matColumnDef="first_and_last" &gt;
    &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; First and Last &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let statususers"  &gt; {{statususers.FIRST_AND_LAST}} &lt;/mat-cell&gt;
         &lt;/ng-container&gt;
  
         &lt;!-- Type Column --&gt;
         &lt;ng-container matColumnDef="registration" &gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header &gt; Registration &lt;/mat-header-cell&gt;
    &lt;mat-cell  #aircrftRegistration *matCellDef="let statususers" &gt; {{statususers.REGISTRATION}}&lt;/mat-cell&gt; 
         &lt;/ng-container&gt;
  
         &lt;!-- Hours Column --&gt;
         &lt;ng-container matColumnDef="type" &gt;
    &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Type &lt;/mat-header-cell&gt;
    &lt;mat-cell #aircrftType *matCellDef="let statususers"  &gt; {{statususers.TYPE}} &lt;/mat-cell&gt;
         &lt;/ng-container&gt;
  
         &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
         &lt;mat-row (click)="selectRow(row)" *matRowDef="let row; columns: displayedColumns;"  &gt;&lt;/mat-row&gt;
  
       &lt;/mat-table&gt;
          &lt;!--   [showFirstLastButtons]="true"&gt;   this was removed from list below --&gt;
       &lt;mat-paginator #paginator    
    [pageSize]="8"
    [pageSizeOptions]="[5, 10, 20]"&gt;
       &lt;/mat-paginator&gt;
  
     &lt;/div&gt;
   &lt;/div&gt;  </code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a table in Angular Material and I would like to click on a row and have it return a cell element of my choice in to a variable so that I can use it elsewhere.
  The code below will display all the column names and the content of the clicked row on the console, but I want to just select one of the columns in Type Script and save it to a variable.</p>
  
  <pre><code>selectRow(row) 
    {
      console.log(row) ;
      this.aircraftreg = 'A row was clicked'   ;  
      // alert ('Aircraft selected') ;
    }
  </code></pre>
  
  <p>Thank-you for your assistance.    <a href="https://i.stack.imgur.com/FnUkM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FnUkM.jpg" alt="enter image description here"></a></p>