CODEWITHSUNDEEP
javascriptangularangular-material
Sebastian
Sebastian

Reputation: 31

Table expand on icon click

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.

Upvotes: 1

Views: 5667

Answers (2)

nash11
nash11

Reputation: 8660

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.

Upvotes: 3

Dipen Shah
Dipen Shah

Reputation: 26075

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>

Upvotes: 1

Related Questions