title: Angular 8: How to toggle multiple rows on row click and to expand all rows on a single button click on Angular Material Table?
body: <p>I am working on the Angular Material Table and get the data source dynamically. I want to toggle multiple rows on a row click with expand all rows on a button click outside the table.</p>
  
  <p>I can expand a one row at a time on row click but i want to toggle multiple rows. How can i do that? </p>
  
  <p>Here is the <code>html</code></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-html lang-html prettyprint-override"><code>&lt;input class="input-form-submit" type="button" value="SHOW ALL DETAIL" (click)="showAllDetail()"&gt;
  
  &lt;table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows class="mat-elevation-z8 material-table"&gt;
  
    &lt;ng-container matColumnDef="postedBy"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;By&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt;{{element.first_name}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="postDate"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Date&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt;{{element.date | date: 'M/d/yyyy h:mm a'}}
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="balance"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Balance&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt;
        ${{element.balance}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="collected"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Collected&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt;
        (${{element.amountReceived | number : '1.2-2'}})
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="adjusted"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Adjusted&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt;
        ${{element.adjusted | number : '1.2-2'}}
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="expandedDetail"&gt;
      &lt;td mat-cell *matCellDef="let element; let i = index" [attr.colspan]="displayedColumns2.length"&gt;
        &lt;ng-container *ngIf="showDetailTransaction || (selectedRow == element &amp;&amp; i)"&gt;
          &lt;div class="trans-div"&gt;
            &lt;table class="dt-width transaction-expansion" [@detailExpand]="checkExpanded(element) ? 'expanded' : 'collapsed'"&gt;
              &lt;ng-container&gt;
                &lt;tr&gt;
                  &lt;td&gt;DATA TO EXPAND&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/ng-container&gt;
  
            &lt;/table&gt;
  
          &lt;/div&gt;
        &lt;/ng-container&gt;
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns2"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let element; columns: displayedColumns2;" class="transaction-exp-row" [class.transaction-expand-row]="checkExpanded(element)" (click)="onExpandOneRow(element)"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="transaction-detail-row" style="height: 0px !important;"&gt;&lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  
  
  <p>Here is the <code>ts</code> code</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>showAllDetail() {
    this.showDetailTransaction = true;
  }
  
  checkExpanded(element): boolean {
    let flag = false;
    this.expandedElement.forEach(e =&gt; {
      if (e === element) {
        flag = true;
      }
    });
    return flag;
  }
  
  onExpandOneRow(element) {
    const index = this.expandedElement.indexOf(element);
    if (index === -1) {
      this.expandedElement.push(element);
    } else {
      this.expandedElement.splice(index, 1);
    }
    this.selectedRow = element;
    this.showHideRow = !this.showHideRow;
  }</code></pre>
  </div>
  </div>
  </p>