Skip to content

Commit 751f37b

Browse files
marthamwangimarthamwangi
committed
Upgrade to Angular 21 and update dependencies in package.json and package-lock.json; enhance HTML structure in components for better readability.
1 parent 85f4066 commit 751f37b

File tree

9 files changed

+7672
-5164
lines changed

9 files changed

+7672
-5164
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
This repository contains the code of the [Angular Material In Depth](https://angular-university.io/course/angular-material-course) video course.
55

6-
This course repository is updated to Angular 20:
6+
This course repository is updated to Angular 21:
77

88
![Angular Material In Depth](https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-material-course-1.jpg)
99

‎package-lock.json‎

Lines changed: 7510 additions & 4977 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@
1313
},
1414
"private": true,
1515
"dependencies": {
16-
"@angular/animations": "20.0.0",
17-
"@angular/cdk": "^20.0.1",
18-
"@angular/common": "20.0.0",
19-
"@angular/compiler": "20.0.0",
20-
"@angular/core": "20.0.0",
21-
"@angular/forms": "20.0.0",
22-
"@angular/material": "^20.0.1",
23-
"@angular/material-moment-adapter": "20.0.1",
24-
"@angular/platform-browser": "20.0.0",
25-
"@angular/platform-browser-dynamic": "20.0.0",
26-
"@angular/router": "20.0.0",
16+
"@angular/animations": "21.0.1",
17+
"@angular/cdk": "^21.0.1",
18+
"@angular/common": "21.0.1",
19+
"@angular/compiler": "21.0.1",
20+
"@angular/core": "^21.0.1",
21+
"@angular/forms": "21.0.1",
22+
"@angular/material": "^21.0.1",
23+
"@angular/material-moment-adapter": "21.0.1",
24+
"@angular/platform-browser": "21.0.1",
25+
"@angular/platform-browser-dynamic": "^21.0.1",
26+
"@angular/router": "21.0.1",
2727
"core-js": "^2.4.1",
2828
"cors": "^2.8.5",
2929
"express": "^4.16.2",
@@ -33,11 +33,11 @@
3333
"zone.js": "~0.15.0"
3434
},
3535
"devDependencies": {
36-
"@angular-devkit/build-angular": "^20.0.0",
37-
"@angular-devkit/schematics": "^20.0.0",
38-
"@angular/cli": "^20.0.0",
39-
"@angular/compiler-cli": "20.0.0",
40-
"@angular/language-service": "20.0.0",
36+
"@angular-devkit/build-angular": "^21.0.1",
37+
"@angular-devkit/schematics": "^21.0.1",
38+
"@angular/cli": "^21.0.1",
39+
"@angular/compiler-cli": "21.0.1",
40+
"@angular/language-service": "21.0.1",
4141
"@types/express": "^4.0.39",
4242
"@types/jasmine": "~3.8.0",
4343
"@types/jasminewd2": "~2.0.2",
@@ -51,6 +51,6 @@
5151
"karma-jasmine": "~4.0.0",
5252
"karma-jasmine-html-reporter": "^1.5.0",
5353
"ts-node": "~3.2.0",
54-
"typescript": "5.8.3"
54+
"typescript": "5.9.3"
5555
}
5656
}

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

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,106 @@
11
<div class="course">
22

3-
<h2>{{course?.description}}</h2>
3+
<h2>{{course?.description}}</h2>
44

5-
<img class="course-thumbnail" [src]="course?.iconUrl">
6-
7-
<div class="spinner-container" *ngIf="loading">
8-
9-
<mat-spinner></mat-spinner>
5+
<img class="course-thumbnail" [src]="course?.iconUrl">
106

7+
@if (loading) {
8+
<div class="spinner-container">
9+
<mat-spinner></mat-spinner>
1110
</div>
11+
}
1212

13-
<div class="scrolling-container">
13+
<div class="scrolling-container">
1414

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

19-
<ng-container matColumnDef="select" sticky>
19+
<ng-container matColumnDef="select" sticky>
2020

21-
<th mat-header-cell *matHeaderCellDef>
21+
<th mat-header-cell *matHeaderCellDef>
2222

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

26-
(change)="toggleAll()">
26+
(change)="toggleAll()">
2727

2828

29-
</mat-checkbox>
29+
</mat-checkbox>
3030

3131

32-
</th>
32+
</th>
3333

34-
<td mat-cell *matCellDef="let lesson" (click)="$event.stopPropagation()">
34+
<td mat-cell *matCellDef="let lesson" (click)="$event.stopPropagation()">
3535

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

39-
</mat-checkbox>
39+
</mat-checkbox>
4040

4141

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

44-
</ng-container>
44+
</ng-container>
4545

46-
<ng-container matColumnDef="seqNo" sticky>
46+
<ng-container matColumnDef="seqNo" sticky>
4747

48-
<th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
48+
<th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
4949

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

52-
</ng-container>
52+
</ng-container>
5353

54-
<ng-container matColumnDef="description">
54+
<ng-container matColumnDef="description">
5555

56-
<th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
56+
<th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
5757

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

60-
</ng-container>
60+
</ng-container>
6161

62-
<ng-container matColumnDef="duration">
62+
<ng-container matColumnDef="duration">
6363

64-
<th mat-header-cell *matHeaderCellDef>Duration</th>
64+
<th mat-header-cell *matHeaderCellDef>Duration</th>
6565

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

68-
</ng-container>
68+
</ng-container>
6969

70-
<ng-container matColumnDef="expandedDetail">
70+
<ng-container matColumnDef="expandedDetail">
7171

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

76-
</ng-container>
76+
</ng-container>
7777

78-
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true">
78+
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true">
7979

80-
</tr>
80+
</tr>
8181

82-
<tr mat-row
83-
(click)="onToggleLesson(lesson)"
84-
*matRowDef="let lesson;columns:displayedColumns">
82+
<tr mat-row
83+
(click)="onToggleLesson(lesson)"
84+
*matRowDef="let lesson;columns:displayedColumns">
8585

86-
</tr>
86+
</tr>
8787

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

91-
</tr>
91+
</tr>
9292

9393

94-
</table>
94+
</table>
9595

96-
</div>
96+
</div>
9797

98-
<mat-paginator class="mat-elevation-z8"
99-
[length]="course?.lessonsCount"
100-
[pageSize]="3"
101-
[pageSizeOptions]="[3, 5, 10]">
98+
<mat-paginator class="mat-elevation-z8"
99+
[length]="course?.lessonsCount"
100+
[pageSize]="3"
101+
[pageSizeOptions]="[3, 5, 10]">
102102

103-
</mat-paginator>
103+
</mat-paginator>
104104

105105
</div>
106106

‎src/app/courses-card-list/courses-card-list.component.html‎

Lines changed: 23 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,30 @@
11

22

33
<mat-grid-list [cols]="cols" [rowHeight]="rowHeight"
4-
[ngClass]="{'handset-portrait': handsetPortrait}" >
5-
6-
<mat-grid-tile *ngFor="let course of courses">
7-
8-
<mat-card class="course-card mat-elevation-z7">
9-
10-
<mat-card-header>
11-
12-
<mat-card-title>{{course.description}}</mat-card-title>
13-
14-
</mat-card-header>
15-
16-
17-
<img mat-card-image [src]="course.iconUrl">
18-
19-
20-
21-
<mat-card-content>
22-
23-
<p>{{course.longDescription}}</p>
24-
25-
</mat-card-content>
26-
27-
28-
<mat-card-actions class="course-actions">
29-
30-
<button mat-raised-button color="primary"
31-
[routerLink]="['courses', course.id]">
32-
VIEW COURSE
33-
</button>
34-
35-
<button mat-raised-button color="accent" (click)="editCourse(course)">
36-
EDIT COURSE
37-
</button>
38-
39-
</mat-card-actions>
40-
41-
42-
43-
</mat-card>
44-
4+
[ngClass]="{'handset-portrait': handsetPortrait}" >
5+
6+
@for (course of courses; track course) {
7+
<mat-grid-tile >
8+
<mat-card class="course-card mat-elevation-z7">
9+
<mat-card-header>
10+
<mat-card-title>{{course.description}}</mat-card-title>
11+
</mat-card-header>
12+
<img mat-card-image [src]="course.iconUrl">
13+
<mat-card-content>
14+
<p>{{course.longDescription}}</p>
15+
</mat-card-content>
16+
<mat-card-actions class="course-actions">
17+
<button mat-raised-button color="primary"
18+
[routerLink]="['courses', course.id]">
19+
VIEW COURSE
20+
</button>
21+
<button mat-raised-button color="accent" (click)="editCourse(course)">
22+
EDIT COURSE
23+
</button>
24+
</mat-card-actions>
25+
</mat-card>
4526
</mat-grid-tile>
27+
}
4628

4729

4830
</mat-grid-list>

0 commit comments

Comments
 (0)