How to expand a row using mat table with a condition

Question

I have a table with different columns, and there is one column which contains <mat-select> and <mat-option> html tags from Material for Angular.

There is different serverdiskType.name.value like 'APP', 'LOG', ... and there is one specific option which is 'CUSTOM'.

I want the row to be expanded when the CUSTOM option is selected, how to do that ?

My code :

My template :

 <table mat-table *ngIf=" resources.length>1" multiTemplateDataRows [dataSource]="dataSourceDisk" >

<!-- DiskType Column -->
        <ng-container matColumnDef="Type">
          <th mat-header-cell *matHeaderCellDef fxFlex="110px"> Disk Type </th>
          <td mat-cell (click)="$event.stopPropagation()" *matCellDef="let resources; let i=index; let element " fxFlex="110px">
            <mat-form-field>
              <mat-select placeholder="Storage Performance" [(ngModel)]="resources.resourceProperties.storageClass"
                [ngModelOptions]="{standalone: true}"
                (ngModelChange)="onChangeResourceProperties($event,'storageClass',i+1)">
                <mat-option *ngFor="let serverdiskType of serverdiskTypes" [value]="serverdiskType.name.value" 
                (click)="EXPAND THE ROW WHEN serverdiskType.name.value EQUALS TO 'CUSTOM'">
                  {{ serverdiskType.name.viewValue }}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </td>
        </ng-container>

 <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
        <ng-container matColumnDef="expandedDetail">
          <td mat-cell *matCellDef="let disk" [attr.colspan]="displayedDiskColumns.length">
            <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
              <div class="example-container">
                <mat-form-field>
                  <input matInput [(ngModel)]="disk.resourceProperties.ioPerMonth" name="ioPerMonth" placeholder="IO/month">
                </mat-form-field>

                <mat-form-field>
                  <input matInput [(ngModel)]="disk.resourceProperties.iops" name="iops" placeholder="IO/S">
                </mat-form-field>
              </div>
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedDiskColumns"></tr>
        <tr mat-row *matRowDef="let element; columns: displayedDiskColumns;" class="example-element-row"
          [class.example-expanded-row]="expandedElement === element"
          (click)="expandedElement = expandedElement === element ? null : element">
        </tr>
        <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

</table>

Answer 1

you need to handle the expansion like below. Expression will be

[@detailExpand]="element.diskType == 'custom' ? 'expanded' : 'collapsed'">

---

<ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail"
           [@detailExpand]="element.diskType == 'custom' ? 'expanded' : 'collapsed'">
        <div class="example-container">
                <mat-form-field>
                  <input matInput [(ngModel)]="element.ioPerMonth" name="element.ioPerMonth" placeholder="IO/month">
                </mat-form-field>

                <mat-form-field>
                  <input matInput [(ngModel)]="element.iops" name="element.iops" placeholder="IO/S">
                </mat-form-field>
              </div>
      </div>
    </td>
  </ng-container>

The working demo is here.. https://stackblitz.com/edit/angular-94fmby Hope this helps.