title: Cannot retrieve id of selected row using button in each row of mat-table of angular 7
body: <p>I have mat-table component from angular material. I populate it and i want to retrieve id of selected row. In each row I placed a button with which i want get that id. Below i put image of it <a href="https://i.stack.imgur.com/hVQ0X.png" rel="nofollow noreferrer">image of mat-table</a>. In column "Id" I print real Id values which I want to retrieve. Maybe Somebody occured the same problem.  </p>
  
  <p>AVAILABLE-COURSES.ts</p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { CourseService } from 'src/app/_services/course.service';
  import { AuthService } from 'src/app/_services/auth.service';
  import { MatPaginator, MatSort, MatTableDataSource } from         '@angular/material';
  import { courseEnrolments } from 'src/app/_models/courseEnrolments';
  
  @Component({
   selector: 'app-available-courses',
     templateUrl: './available-courses.component.html',
     styleUrls: ['./available-courses.component.scss']
   })
    export class AvailableCoursesComponent implements OnInit {
     dataSource = new MatTableDataSource();
      courseEnrolments: courseEnrolments[];
     displayedColumns = [
      'id',
      'name',
      'description',
      'other',
      'checked',
     ];
     @ViewChild(MatPaginator) paginator: MatPaginator;
     @ViewChild(MatSort) sort: MatSort;
  
     constructor(
     private courseService: CourseService,
     private authService: AuthService
     ) {}
  
     ngOnInit() {
     this.courseService
    .getAllCourses()
    .subscribe(result =&gt; {
  
      if (!result) {
        return;
      }
  
      this.dataSource = new MatTableDataSource(result);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
     });
     }
     applyFilter(filterValue: string) {
      filterValue = filterValue.trim();
      filterValue = filterValue.toLowerCase();
       this.dataSource.filter = filterValue;
     }
    handleClick(event: Event) {
     console.log('‘Click’', event);
    }
  }
  </code></pre>
  
  <p>AVAILABLE-COURSES.HTML`</p>
  
  <pre><code> &lt;/div&gt;
   &lt;mat-table [dataSource]="dataSource" class="courses"&gt;
   &lt;ng-container matColumnDef="id"&gt;
   &lt;mat-header-cell *matHeaderCellDef&gt; Id &lt;/mat-header-cell&gt;
   &lt;mat-cell *matCellDef="let courseEnrolments"&gt; {{courseEnrolments.id}} &lt;/mat-   cell&gt;
  &lt;/ng-container&gt;
  &lt;ng-container matColumnDef="name"&gt;
  &lt;mat-header-cell *matHeaderCellDef&gt; Course Name &lt;/mat-header-cell&gt;
  &lt;mat-cell *matCellDef="let courseEnrolments"&gt; {{courseEnrolments.name}}        &lt;/mat-cell&gt;
   &lt;/ng-container&gt;
   &lt;ng-container matColumnDef="description"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt; Description &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let courseEnrolments"&gt;    {{    courseEnrolments.description}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  &lt;ng-container matColumnDef="other"&gt;
   &lt;mat-header-cell *matHeaderCellDef&gt; Other informations &lt;/mat-header-cell&gt;
   &lt;mat-cell *matCellDef="let courseEnrolments"&gt; {{courseEnrolments.other}}  &lt;/mat-cell&gt;
   &lt;/ng-container&gt;
   &lt;ng-container matColumnDef="checked"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt;Enlist&lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let courseEnrolments"&gt;
      &lt;button  (click)="handleClick($event)"_ngcontent-c54="" color="primary"    mat-stroked-button="" class="mat-stroked-button mat-primary"&gt;&lt;span
        class="mat-button-wrapper"&gt;Enlist&lt;/span&gt;
       &lt;div class="mat-button-ripple mat-ripple" matripple=""&gt;&lt;/div&gt;
       &lt;div class="mat-button-focus-overlay"&gt;&lt;/div&gt;
     &lt;/button&gt;
    &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;"&gt;&lt;/mat-row&gt;
  </code></pre>
  
  <p></p>