0
votes

I just want to click on arrow icon (expand_more) to expand not all the line

Code on angular material page: https://stackblitz.com/angular/oyybnyopyemm?file=app%2Ftable-expandable-rows-example.ts

my HTML

    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
      <td mat-cell *matCellDef="let element">
        <mat-icon (click)="onBlink(element)" class="icon bulb" [ngClass]="element.action ? 'blink_me': ''">wb_incandescent</mat-icon>
        <mat-icon (click)="element.status=!element.status" *ngIf="!element.error" class="icon playPause">{{element.status ? 'play_circle_outline' : 'pause_circle_outline' }}</mat-icon>
        <mat-icon *ngIf="element.error" class="error icon">error</mat-icon>
        <mat-icon *matRowDef="let element">expand_more</mat-icon>
      </td>
    </ng-container>

    <ng-container matColumnDef="expandedDetail" >
      <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
        <div class="example-element-detail"
             [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
          <div>
            <p>Serial : {{element.serial}} </p>
            <p>{{element.name}}have a problem.</p>
            <p>Contact a doctor </p>
          </div>
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

    <tr mat-row *matRowDef="let element; columns: displayedColumns;"
        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>

can you help me to set it up.

2
Hi,, this is working in the demo you sharedAdrita Sharma
Please share screenshot of issue which you are facing and any console errors. From stackblitz, row expand is working fineNaga Sai A
the link is not my code, it's a demo on material websiteSebastian
I have setup the expand but I just want to click on the arrow icon to expand, not all the line.Sebastian
what does it mean not all the line? Just one column should be expanded? Or by clicking your icon, then row should be expanded?StepUp

2 Answers

1
votes

All you need to do is move the click event from the row to your mat-icon.

<mat-icon (click)="expandedElement = expandedElement === element ? null : element">
    {{expandedElement === element ? 'expand_less' : 'expand_more'}}
</mat-icon>

<!-- ... -->

<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
    class="example-element-row"
    [class.example-expanded-row]="expandedElement === element">
</tr>

Here is a working example on StackBlitz.

0
votes

Use the following StackBlitz as an example.

What I have done here is basically moved click event handler from row to icon you have added.

<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> Actions </th>
    <td mat-cell *matCellDef="let element">
        <mat-icon (click)="onBlink(element)" class="icon bulb" [ngClass]="element.action ? 'blink_me': ''">wb_incandescent</mat-icon>
        <mat-icon (click)="element.status=!element.status" *ngIf="!element.error" class="icon playPause">{{element.status ? 'play_circle_outline' : 'pause_circle_outline' }}</mat-icon>
        <mat-icon *ngIf="element.error" class="error icon">error</mat-icon>
        <mat-icon (click)="expandedElement = expandedElement === element ? null : element">expand_more</mat-icon>
    </td>
</ng-container>
...
<tr mat-row *matRowDef="let element; columns: displayedColumns;"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element">
</tr>