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?

Question

 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                  ;
 }

 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 <Statususers>() ;  
   aircraftreg: string = 'None' ;

   @ViewChild(MatSort) sort: MatSort ;
   @ViewChild(MatPaginator) paginator: MatPaginator;

   constructor( private http: HttpClient  ) { }

   ngOnInit()                    // 'https://jsonplaceholder.typicode.com/users' 
    { 
      this.http.get<Statususers[] > ('http://huckleberrypp.com/angular/php/status_users.php').subscribe (statususers => { 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']);

  }

 }

 <div class="myAircraftBrowse">  
   <div class="example-header">
     <mat-form-field>
       <input matInput type= "text" (keyup)="doFilter($event.target.value)" placeholder="Enter aircraft filter here">
     </mat-form-field>
   </div>

   <h1 class="centerText"> {{aircraftreg}} </h1>

   <div class="example-container mat-elevation-z8">
     <mat-table #table [dataSource]="dataSource" matSort>
       <!--- Note that these columns can be defined in any order.  The actual rendered columns are set as a property on the row definition" -->

       <!-- Registration Column -->
       <ng-container matColumnDef="first_and_last" >
  <mat-header-cell *matHeaderCellDef mat-sort-header> First and Last </mat-header-cell>
  <mat-cell *matCellDef="let statususers"  > {{statususers.FIRST_AND_LAST}} </mat-cell>
       </ng-container>

       <!-- Type Column -->
       <ng-container matColumnDef="registration" >
    <mat-header-cell *matHeaderCellDef mat-sort-header > Registration </mat-header-cell>
  <mat-cell  #aircrftRegistration *matCellDef="let statususers" > {{statususers.REGISTRATION}}</mat-cell> 
       </ng-container>

       <!-- Hours Column -->
       <ng-container matColumnDef="type" >
  <mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
  <mat-cell #aircrftType *matCellDef="let statususers"  > {{statususers.TYPE}} </mat-cell>
       </ng-container>

       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row (click)="selectRow(row)" *matRowDef="let row; columns: displayedColumns;"  ></mat-row>

     </mat-table>
        <!--   [showFirstLastButtons]="true">   this was removed from list below -->
     <mat-paginator #paginator    
  [pageSize]="8"
  [pageSizeOptions]="[5, 10, 20]">
     </mat-paginator>

   </div>
 </div>  

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.

selectRow(row) 
  {
    console.log(row) ;
    this.aircraftreg = 'A row was clicked'   ;  
    // alert ('Aircraft selected') ;
  }

Thank-you for your assistance.

Answer 1

You can simply get the column content from selected row like row['column Name']

For example my displayed columns are

displayedColumns = ['id', 'name', 'progress', 'color'];

I can access value of column name from selected row.

selectRow(row) {
  alert(row['name']);
 }

Here is the HTML to get the event from data-table row:

<mat-row (click)="selectRow(row)" *matRowDef="let row; columns: displayedColumns;">
</mat-row>

Edit: Another problem is, your displayedColumns is in lowercase while Statususers data coming with uppercase.

While accessing use like row['REGISTRATION']