File tree 3 files changed +12
-15
lines changed
material/table/table-expandable-rows
material-experimental/mdc-table/table-expandable-rows
3 files changed +12
-15
lines changed Original file line number Diff line number Diff line change 5
5
< th mat-header-cell *matHeaderCellDef > {{column}} </ th >
6
6
< td mat-cell *matCellDef ="let element "> {{element[column]}} </ td >
7
7
</ ng-container >
8
+ < ng-container matColumnDef ="expand ">
9
+ < th mat-header-cell *matHeaderCellDef aria-label ="row actions "> </ th >
10
+ < td mat-cell *matCellDef ="let element ">
11
+ < button mat-icon-button aria-label ="expand row " (click) ="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation() ">
12
+ < mat-icon *ngIf ="expandedElement !== element "> keyboard_arrow_down</ mat-icon >
13
+ < mat-icon *ngIf ="expandedElement === element "> keyboard_arrow_up</ mat-icon >
14
+ </ button >
15
+ </ td >
16
+ </ ng-container >
8
17
9
18
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
10
19
< ng-container matColumnDef ="expandedDetail ">
Original file line number Diff line number Diff line change 7
7
</ ng-container >
8
8
< ng-container matColumnDef ="expand ">
9
9
< th mat-header-cell *matHeaderCellDef aria-label ="row actions "> </ th >
10
- < td mat-cell *matCellDef ="let element ">
10
+ < td mat-cell *matCellDef ="let element ">
11
11
< button mat-icon-button aria-label ="expand row " (click) ="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation() ">
12
- < mat-icon *ngIf ="expandedElement !== element "> keyboard_arrow_down</ mat-icon >
13
- < mat-icon *ngIf ="expandedElement === element "> keyboard_arrow_up</ mat-icon >
12
+ < mat-icon *ngIf ="expandedElement !== element "> keyboard_arrow_down</ mat-icon >
13
+ < mat-icon *ngIf ="expandedElement === element "> keyboard_arrow_up</ mat-icon >
14
14
</ button >
15
15
</ td >
16
16
</ ng-container >
Original file line number Diff line number Diff line change @@ -460,23 +460,11 @@ <h4>Textarea</h4>
460
460
461
461
< p >
462
462
Multiple hints
463
- < mat-form-field appearance ="fill " [color] ="color " subscriptSizing ="dynamic ">
464
- < mat-label > Fill appearance</ mat-label >
465
- < input matInput >
466
- < mat-hint > aaa</ mat-hint >
467
- < mat-hint > bbb</ mat-hint >
468
- < mat-hint > ccc</ mat-hint >
469
- </ mat-form-field >
470
- </ p >
471
-
472
- < p >
473
- Multiple hints with differing alignment
474
463
< mat-form-field appearance ="fill " [color] ="color " subscriptSizing ="dynamic ">
475
464
< mat-label > Fill appearance</ mat-label >
476
465
< input matInput >
477
466
< mat-hint > aaa</ mat-hint >
478
467
< mat-hint align ="end "> bbb</ mat-hint >
479
- < mat-hint align ="end "> ccc</ mat-hint >
480
468
</ mat-form-field >
481
469
</ p >
482
470
You can’t perform that action at this time.
0 commit comments