Skip to content

Commit 6b97437

Browse files
author
Your Name
committed
Angular Material In Depth
1 parent 87b6f6a commit 6b97437

File tree

2 files changed

+54
-42
lines changed

2 files changed

+54
-42
lines changed

‎src/app/course/course.component.html

Lines changed: 48 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -10,84 +10,90 @@ <h2>{{course?.description}}</h2>
1010

1111
</div>
1212

13-
<table mat-table class="lessons-table mat-elevation-z8"
14-
matSort matSortDisableClear matSortActive="seqNo" matSortDirection="asc"
15-
[dataSource]="lessons" multiTemplateDataRows>
13+
<div class="scrolling-container">
1614

17-
<ng-container matColumnDef="select">
15+
<table mat-table class="lessons-table mat-elevation-z8"
16+
matSort matSortDisableClear matSortActive="seqNo" matSortDirection="asc"
17+
[dataSource]="lessons" multiTemplateDataRows>
1818

19-
<th mat-header-cell *matHeaderCellDef>
19+
<ng-container matColumnDef="select" sticky>
2020

21-
<mat-checkbox [checked]="selection.hasValue() && isAllSelected()"
22-
[indeterminate]="selection.hasValue() && !isAllSelected()"
21+
<th mat-header-cell *matHeaderCellDef>
2322

24-
(change)="toggleAll()">
23+
<mat-checkbox [checked]="selection.hasValue() && isAllSelected()"
24+
[indeterminate]="selection.hasValue() && !isAllSelected()"
2525

26+
(change)="toggleAll()">
2627

27-
</mat-checkbox>
2828

29+
</mat-checkbox>
2930

30-
</th>
3131

32-
<td mat-cell *matCellDef="let lesson" (click)="$event.stopPropagation()">
32+
</th>
3333

34-
<mat-checkbox (change)="onLessonToggled(lesson)"
35-
[checked]="selection.isSelected(lesson)">
34+
<td mat-cell *matCellDef="let lesson" (click)="$event.stopPropagation()">
3635

37-
</mat-checkbox>
36+
<mat-checkbox (change)="onLessonToggled(lesson)"
37+
[checked]="selection.isSelected(lesson)">
3838

39+
</mat-checkbox>
3940

40-
</td>
4141

42-
</ng-container>
42+
</td>
4343

44-
<ng-container matColumnDef="seqNo">
44+
</ng-container>
4545

46-
<th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
46+
<ng-container matColumnDef="seqNo" sticky>
4747

48-
<td mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</td>
48+
<th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
4949

50-
</ng-container>
50+
<td mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</td>
5151

52-
<ng-container matColumnDef="description">
52+
</ng-container>
5353

54-
<th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
54+
<ng-container matColumnDef="description">
5555

56-
<td mat-cell *matCellDef="let lesson">{{lesson.description}}</td>
56+
<th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
5757

58-
</ng-container>
58+
<td mat-cell *matCellDef="let lesson">{{lesson.description}}</td>
5959

60-
<ng-container matColumnDef="duration">
60+
</ng-container>
6161

62-
<th mat-header-cell *matHeaderCellDef>Duration</th>
62+
<ng-container matColumnDef="duration">
6363

64-
<td class="duration-cell" mat-cell *matCellDef="let lesson">{{lesson.duration}}</td>
64+
<th mat-header-cell *matHeaderCellDef>Duration</th>
6565

66-
</ng-container>
66+
<td class="duration-cell" mat-cell *matCellDef="let lesson">{{lesson.duration}}</td>
6767

68-
<ng-container matColumnDef="expandedDetail">
68+
</ng-container>
6969

70-
<td mat-cell *matCellDef="let lesson" colspan="4">
71-
{{lesson.longDescription}}
72-
</td>
70+
<ng-container matColumnDef="expandedDetail">
7371

74-
</ng-container>
72+
<td mat-cell *matCellDef="let lesson" colspan="4">
73+
{{lesson.longDescription}}
74+
</td>
7575

76-
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
76+
</ng-container>
7777

78-
<tr mat-row
79-
(click)="onToggleLesson(lesson)"
80-
*matRowDef="let lesson;columns:displayedColumns">
78+
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true">
8179

82-
</tr>
80+
</tr>
8381

84-
<tr mat-row *matRowDef="let lesson;columns:['expandedDetail']"
85-
[class.collapsed-detail]="lesson != expandedLesson">
82+
<tr mat-row
83+
(click)="onToggleLesson(lesson)"
84+
*matRowDef="let lesson;columns:displayedColumns">
8685

87-
</tr>
86+
</tr>
8887

88+
<tr mat-row *matRowDef="let lesson;columns:['expandedDetail']"
89+
[class.collapsed-detail]="lesson != expandedLesson">
8990

90-
</table>
91+
</tr>
92+
93+
94+
</table>
95+
96+
</div>
9197

9298
<mat-paginator class="mat-elevation-z8"
9399
[length]="course?.lessonsCount"

‎src/app/course/course.component.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@
1111
display: block;
1212
}
1313

14+
.scrolling-container {
15+
// overflow: auto;
16+
//max-height: 250px;
17+
//max-width: 200px;
18+
}
19+
1420
.description-cell {
1521
text-align: left;
1622
margin: 10px auto;

0 commit comments

Comments
 (0)