CODEWITHSUNDEEP
htmlangularangular-materialangular9angular-material-table
avishekdr
avishekdr

Reputation: 1068

How to expand the expansion panel in mat-table by a button click?

I was following this Mat Expansion table to create a expansion panel for each row. I've disabled the row click to expand the panel by (click)="$event.stopPropagation()" in mat-cell. Now I need to expand the panel on a button edit. Below is my code for the same:

<div class="mat-elevation-z8" *ngIf="ELEMENT_DATA.length>0">
  <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
    <ng-container matColumnDef="No">
      <th mat-header-cell *matHeaderCellDef> No </th>
      <td mat-cell *matCellDef="let element"> {{element.no}}</td>
    </ng-container>
    <ng-container matColumnDef="Category">
      <th mat-header-cell *matHeaderCellDef> Category </th>
      <td mat-cell *matCellDef="let element"> {{element.name}}</td>
    </ng-container>
    <ng-container matColumnDef="Status">
      <th mat-header-cell *matHeaderCellDef> Status </th>
      <td mat-cell *matCellDef="">
        <mat-slide-toggle>Inactive</mat-slide-toggle>
      </td>
    </ng-container>
    <ng-container matColumnDef="Action">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="" (click)="$event.stopPropagation()">
        <button mat-flat-button color="primary" style="margin-right: 5px;">EDIT</button>
        <button mat-flat-button color="warn">DELETE</button>
      </td>
    </ng-container>
    <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
        <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
          <div class="example-element-description">
            <form>
              <mat-form-field class="example-full-width create-fields">
                <mat-label>Category</mat-label>
                <input matInput name="category" ngModel>
              </mat-form-field>
              <mat-slide-toggle>Inactive</mat-slide-toggle>
              <button mat-flat-button color="primary" style="display: inline;margin-left: 50px;">Update</button>
            </form>
          </div>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
    ></tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
  </table>
  <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
</div>
<h1 *ngIf="ELEMENT_DATA.length == 0" class="message">No Categories Added Yet</h1>

I want the EDIT button to work as the expander. What necessary changes do I need to make ?

Upvotes: 1

Views: 5142

Answers (1)

Eliseo
Eliseo

Reputation: 57939

just add to DisplayColumns a new column 'action'

columnsToDisplay = ['name', 'weight', 'symbol', 'position','action'];

Then change the code where you defined the columns

<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column!='action'?column:''}} </th>
    <td mat-cell *matCellDef="let element"> 
      {{element[column]}} 
      <button *ngIf="column=='action'" 
       (click)="expandedElement = expandedElement === element ? null : element">
             click</button>
      </td>
</ng-container>

See that the code in the button (click) is the same that you had in the (click) in the <tr mat-row *matRowDef..> (don't forget remove from this last)

See the stackblitz

Upvotes: 2

Related Questions