title: How to expand the expansion panel in mat-table by a button click?
body: <p>I was following this <a href="https://stackblitz.com/angular/vjjyayoqjno?file=src%2Fapp%2Ftable-expandable-rows-example.ts" rel="nofollow noreferrer">Mat Expansion table</a> to create a expansion panel for each row. I've disabled the row click to expand the panel by <code>(click)="$event.stopPropagation()"</code> in <code>mat-cell</code>. Now I need to expand the panel on a button edit. Below is my code for the same:</p>
  
  <pre><code>&lt;div class="mat-elevation-z8" *ngIf="ELEMENT_DATA.length&gt;0"&gt;
    &lt;table mat-table [dataSource]="dataSource" multiTemplateDataRows&gt;
      &lt;ng-container matColumnDef="No"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; No &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt; {{element.no}}&lt;/td&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="Category"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Category &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt; {{element.name}}&lt;/td&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="Status"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Status &lt;/th&gt;
        &lt;td mat-cell *matCellDef=""&gt;
          &lt;mat-slide-toggle&gt;Inactive&lt;/mat-slide-toggle&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="Action"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;&lt;/th&gt;
        &lt;td mat-cell *matCellDef="" (click)="$event.stopPropagation()"&gt;
          &lt;button mat-flat-button color="primary" style="margin-right: 5px;"&gt;EDIT&lt;/button&gt;
          &lt;button mat-flat-button color="warn"&gt;DELETE&lt;/button&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="expandedDetail"&gt;
        &lt;td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length"&gt;
          &lt;div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'"&gt;
            &lt;div class="example-element-description"&gt;
              &lt;form&gt;
                &lt;mat-form-field class="example-full-width create-fields"&gt;
                  &lt;mat-label&gt;Category&lt;/mat-label&gt;
                  &lt;input matInput name="category" ngModel&gt;
                &lt;/mat-form-field&gt;
                &lt;mat-slide-toggle&gt;Inactive&lt;/mat-slide-toggle&gt;
                &lt;button mat-flat-button color="primary" style="display: inline;margin-left: 50px;"&gt;Update&lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
      &lt;tr mat-header-row *matHeaderRowDef="columnsToDisplay"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
      &gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"&gt;&lt;/tr&gt;
    &lt;/table&gt;
    &lt;mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  &lt;h1 *ngIf="ELEMENT_DATA.length == 0" class="message"&gt;No Categories Added Yet&lt;/h1&gt;
  </code></pre>
  
  <p>I want the <code>EDIT</code> button to work as the expander.
  What necessary changes do I need to make ?</p>