Mat Table Expandable Rows Angular 7

Question

Is there way to disable row expansion on a specific column. Generally if you click on any part of a row the it expands. But say one column is a comment section, you wouldn't want the row to expand when the user clicks in the input field. Like in this example. How do you prevent the row from expanding when clicking on say the position column: https://stackblitz.com/angular/gqvrlgbeqkv?file=app%2Ftable-expandable-rows-example.ts

score 5 · Answer 1 · answered Mar 20 '19 at 12:34

In your example Stackblitz the code which expands a row is set on the row definition:

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

In order to have the row only expand if the user clicks on a specific column (or in your case not to expand if a specific column is clicked) you need to move the onClick function and the necessary css to those columns which should expand, e.g.

    ...
    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
        <th mat-header-cell mat-sort-header *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let element" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
         (click)="expandedElement = expandedElement === element ? null : element"> {{element.weight}} </td>
    </ng-container>
    ...

I've modified your example to not expand/collapse if the position column is clicked: Stackblitz

PS: for better maintainability you should adjust the css class names etc.

Thanks the $event.stopPropagation was a quicker solution – Flash Mar 20 '19 at 12:52 — Flash, Mar 20 '19 at 12:52

Kiril1512 · Accepted Answer · 2019-03-20T12:40:47.090

1

Yes you can use Angular Material or other Design components for Angular if you search more.

See this for example: Expansion Panel | Angular Material

Update: you can try use $event.stopPropagation as said in this solution: Angular Material 2 Table Mat Row Click event also called with button click in Mat Cell

edited Mar 20 '19 at 12:40

answered Mar 20 '19 at 12:13

Kiril1512

3,231
3
16
41

I'm talking about something like in this example. How do you prevent the row from expanding when clicking on say the position column: https://stackblitz.com/angular/gqvrlgbeqkv?file=app%2Ftable-expandable-rows-example.ts – Flash Mar 20 '19 at 12:17
@Flash so you want it to expand if you click on name,weight and symbol columns and not if clicked on position column? – Kiril1512 Mar 20 '19 at 12:21
right because in my case that column would be a comment section and I don't want it to expand every time they click on the input field – Flash Mar 20 '19 at 12:30
1

@Flash Then you can try use `$event.stopPropagation` as said in this solution: [Solution](https://stackoverflow.com/questions/47051485/angular-material-2-table-mat-row-click-event-also-called-with-button-click-in-ma?rq=1) – Kiril1512 Mar 20 '19 at 12:38

score 1 · Answer 3 · answered Mar 20 '19 at 12:33

Use pointer events none

The pointer-events property defines whether or not an element reacts to pointer events.

create a Class with pointer-events: none property then use ngClass to add dynamically

<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"
        [class.disable]="element[column] == 'Hydrogen' || element[column] == '1.0079' 
        || element[column] == 1 ||element[column] == 'H'">  {{element[column]}} </td>
</ng-container>

Example:https://stackblitz.com/edit/angular-fpp7fx

In that example the whole first row is just disabled from expanding — Flash, Mar 20 '19 at 12:41

Mat Table Expandable Rows Angular 7

3 Answers3