Upgrade to Angular 18

Author: jhades

README.md

@@ -3,7 +3,7 @@
 
 This repository contains the code of the [Modern Angular With Signals Course](https://angular-university.io/course/angular-signals-course).
 
-This course repository is updated to Angular 17:
+This course repository is updated to Angular 18:
 
 ![Modern Angular With Signals](https://d3vigmphadbn9b.cloudfront.net/course-images/large-images/angular-signals-course.jpg)
 

server/db-data.ts

@@ -882,7 +882,78 @@ export const LESSONS : any = {
     'seqNo': 9,
     courseId: 17,
     videoId: '8m5RrAtqlyw'
-  }
+  },
+
+  90: {
+    id: 90,
+    'description': 'Setting Up Your Development Environment',
+    'duration': '09:15',
+    'seqNo': 1,
+    courseId: 18
+  },
+  91: {
+    id: 91,
+    'description': 'Writing Your First Angular Signal',
+    'duration': '07:41',
+    'seqNo': 1,
+    courseId: 18
+  },
+  92: {
+    id: 92,
+    'description': 'Why Angular Signals? Main Benefits',
+    'duration': '04:55',
+    'seqNo': 1,
+    courseId: 18
+  },
+  93: {
+    id: 93,
+    'description': 'The Current State of Signal-Based Change Detection',
+    'duration': '08:08',
+    'seqNo': 1,
+    courseId: 18
+  },
+  94: {
+    id: 94,
+    'description': 'The Angular signals update API and Read-Only Signals',
+    'duration': '09:08',
+    'seqNo': 1,
+    courseId: 18
+  },
+  95: {
+    id: 95,
+    'description': 'Angular Signals and Immutability - Objects',
+    'duration': '05:55',
+    'seqNo': 1,
+    courseId: 18
+  },
+  96: {
+    id: 96,
+    'description': 'Angular Signals and Immutability - Arrays',
+    'duration': '05:59',
+    'seqNo': 1,
+    courseId: 18
+  },
+  97: {
+    id: 97,
+    'description': 'Angular Computed Signals - Everything You Need To Know',
+    'duration': '08:07',
+    'seqNo': 1,
+    courseId: 18
+  },
+  98: {
+    id: 98,
+    'description': 'Angular Signal Effects - Everything You Need To Know',
+    'duration': '06:36',
+    'seqNo': 1,
+    courseId: 18
+  },
+  99: {
+    id: 99,
+    'description': 'Angular Signal Effects - Setting The Injection Context',
+    'duration': '09:30',
+    'seqNo': 1,
+    courseId: 18
+  },
 
 };
 

server/get-courses.route.ts

@@ -11,18 +11,18 @@ export function getAllCourses(req: Request, res: Response) {
       return;
   */
 
-
+ console.log(`Called GET /api/courses`);
 
   setTimeout(() => {
 
-    res.status(200).json({courses:Object.values(COURSES)});
+    console.log(`Returning GET /api/courses`);
 
-  }, 1500);
+    res.status(200).json({courses:Object.values(COURSES)});
 
+  }, 1000);
 
 }
 
-
 export function getCourseById(req: Request, res: Response) {
 
   setTimeout(() => {
@@ -33,7 +33,6 @@ export function getCourseById(req: Request, res: Response) {
     const course = courses.find(course => course.id == courseId);
 
     res.status(200).json(course);
-
-  }, 1500);
+  })
 
 }

server/search-lessons.route.ts

@@ -1,25 +1,40 @@
-
 import {Request, Response} from 'express';
 import {LESSONS} from "./db-data";
 import {setTimeout} from "timers";
 
 
-
 export function searchLessons(req: Request, res: Response) {
 
-  const query = req.query["query"] as string;
+  const query = req.query["query"] as string,
+    courseId = req.query["courseId"] as string;
 
   const allLessons: any[] = Object.values(LESSONS);
 
-  console.log(allLessons)
+  if (!query && !courseId) {
+    res.status(200).json({lessons: []});
+    return;
+  }
+
+  let filtered: any[] = allLessons;
+  console.log(`Filtering total lessons ${filtered?.length}`, allLessons)
+
+  if (courseId) {
+    console.log(`Filtering by courseId ${parseInt(courseId)}`)
+    filtered = filtered.filter(lesson => lesson.courseId == parseInt(courseId));
+    console.log(`Filtered ${filtered?.length} results`)
+  }
 
-  const filtered = allLessons.filter(
-    lesson => lesson?.description?.trim()?.toLowerCase()?.search(query?.toLowerCase()) >= 0);
+  if (query) {
+    console.log(`Filtering by query ${query}`)
+    filtered = allLessons.filter(
+      lesson => lesson?.description?.trim()?.toLowerCase()?.search(query?.toLowerCase()) >= 0);
+    console.log(`Filtered ${filtered?.length} results`)
+  }
 
   const lessons = filtered.slice(0, 10);
 
   setTimeout(() => {
     res.status(200).json({lessons});
-  },1000);
+  }, 1000);
 
 }

src/app/app.component.html

@@ -14,16 +14,17 @@
         <span>Lessons</span>
       </a>
 
-      @if (!isLoggedIn()) {
+      @if(isLoggedIn()) {
+        <a mat-list-item (click)="onLogout()">
+          <mat-icon>exit_to_app</mat-icon>
+          <span>Logout</span>
+        </a>
+      }
+      @else {
         <a mat-list-item routerLink="login">
           <mat-icon>account_circle</mat-icon>
           <span>Login</span>
         </a>
-      } @else {
-        <a mat-list-item (click)="logout()">
-          <mat-icon>exit_to_app</mat-icon>
-          <span>Logout</span>
-        </a>
       }
 
     </mat-nav-list>
@@ -42,13 +43,11 @@
 
     </div>
 
-
   </mat-toolbar>
 
+  <messages />
 
-  <loading/>
-
-  <messages/>
+  <loading />
 
   <router-outlet/>
 

src/app/app.component.ts

@@ -9,10 +9,13 @@ import {LoadingIndicatorComponent} from "./loading/loading.component";
 import {MessagesComponent} from "./messages/messages.component";
 import {AuthService} from "./services/auth.service";
 
+
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, MatSidenavContainer, MatSidenav, MatNavList, MatListItem, MatIcon, RouterLink, MatToolbar, MatIconButton, LoadingIndicatorComponent, MessagesComponent],
+  imports: [
+    RouterOutlet, MatSidenavContainer, MatSidenav, MatNavList, MatListItem, MatIcon, RouterLink, MatToolbar,
+    MatIconButton, LoadingIndicatorComponent, MessagesComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
@@ -22,8 +25,7 @@ export class AppComponent {
 
   isLoggedIn = this.authService.isLoggedIn;
 
-  logout() {
+  onLogout() {
     this.authService.logout();
   }
-
 }

src/app/app.config.ts

@@ -4,15 +4,17 @@ import {provideRouter} from '@angular/router';
 import {routes} from './app.routes';
 import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
 import { provideHttpClient, withFetch, withInterceptors } from "@angular/common/http";
-import {loadingInterceptor} from "./loading/loading.interceptor";
+import {loadingInterceptor} from "./services/loading.interceptor";
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
     provideAnimationsAsync(),
     provideHttpClient(
       withFetch(),
-      withInterceptors([loadingInterceptor])
+      withInterceptors([
+        loadingInterceptor
+      ])
     )
   ]
 };

src/app/app.routes.ts

@@ -1,8 +1,8 @@
 import {Routes} from '@angular/router';
 import {HomeComponent} from "./home/home.component";
 import {LoginComponent} from "./login/login.component";
-import {isUserAuthenticated} from "./guards/auth.guard";
 import {LessonsComponent} from "./lessons/lessons.component";
+import {isUserAuthenticated} from "./guards/auth.guard";
 import {CourseComponent} from "./course/course.component";
 import {courseResolver} from "./course/course.resolver";
 import {courseLessonsResolver} from "./course/course-lessons.resolver";
@@ -14,7 +14,7 @@ export const routes: Routes = [
     canActivate: [isUserAuthenticated]
   },
   {
-    path: "courses/:courseId",
+    'path': 'courses/:courseId',
     component: CourseComponent,
     canActivate: [isUserAuthenticated],
     resolve: {

src/app/course-category-combobox/course-category-combobox.component.html

@@ -1,9 +1,10 @@
 
 <div class="form-control">
 
-  <label>{{ label() }}:</label>
+  <label>{{label()}}</label>
 
-  <select [value]="value()" (change)="onCategoryChanged(category.value)" #category>
+  <select [value]="value()" #category
+    (change)="onCategoryChanged(category.value)">
     <option value="BEGINNER">Beginners</option>
     <option value="INTERMEDIATE">Intermediate</option>
     <option value="ADVANCED">Advanced</option>

src/app/course-category-combobox/course-category-combobox.component.ts

@@ -17,4 +17,5 @@ export class CourseCategoryComboboxComponent {
   onCategoryChanged(category: string) {
     this.value.set(category as CourseCategory);
   }
+
 }

src/app/course/course-lessons.resolver.ts

@@ -1,14 +1,16 @@
-import {LessonsService} from "../services/lessons.service";
+import {ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot} from "@angular/router";
+import {Lesson} from "../models/lesson.model";
 import {inject} from "@angular/core";
-import {ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";
+import {LessonsService} from "../services/lessons.service";
 
 
-export const courseLessonsResolver =
-  async (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
-  const courseId = route.paramMap.get('courseId');
-  if (!courseId) {
-    return [];
+export const courseLessonsResolver: ResolveFn<Lesson[]> =
+  async (route: ActivatedRouteSnapshot,
+         state: RouterStateSnapshot) => {
+    const courseId = route.paramMap.get("courseId");
+    if (!courseId) {
+      return [];
+    }
+    const lessonsService = inject(LessonsService);
+    return lessonsService.loadLessons({courseId});
   }
-  const lessonsService = inject(LessonsService);
-  return lessonsService.loadLessons({courseId})
-}

src/app/course/course.component.html

@@ -1,32 +1,20 @@
-
 <div class="course-container">
-
   <div class="course-header">
-
     <h1>{{ course()?.title }}</h1>
-
     <img class="course-image" [src]="course()?.iconUrl">
-
   </div>
-
   <div class="table-container">
-
     <table class="results-table">
-
-      @for (lesson of lessons(); track lesson.id) {
+      @for(lesson of lessons(); track lesson.id) {
         <tr>
           <td>
-            {{ lesson.description }}
+            {{lesson.description}}
           </td>
           <td>
-            {{ lesson.duration }}
+            {{lesson.duration}}
           </td>
         </tr>
       }
-
     </table>
-
   </div>
-
 </div>
-

src/app/course/course.component.ts

@@ -1,7 +1,7 @@
 import {Component, inject, OnInit, signal} from '@angular/core';
-import {ActivatedRoute, ActivatedRouteSnapshot} from "@angular/router";
 import {Course} from "../models/course.model";
 import {Lesson} from "../models/lesson.model";
+import {ActivatedRoute} from "@angular/router";
 
 @Component({
   selector: 'course',
@@ -22,5 +22,4 @@ export class CourseComponent implements OnInit {
     this.course.set(this.route.snapshot.data["course"]);
     this.lessons.set(this.route.snapshot.data["lessons"]);
   }
-
 }

src/app/course/course.resolver.ts

@@ -1,15 +1,16 @@
 import {ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot} from "@angular/router";
+import {Course} from "../models/course.model";
 import {CoursesService} from "../services/courses.service";
 import {inject} from "@angular/core";
-import {Course} from "../models/course.model";
 
 
 export const courseResolver: ResolveFn<Course | null> =
-  async (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
-  const courseId = route.paramMap.get('courseId');
-  if (!courseId) {
-    return null;
-  }
-  const coursesService = inject(CoursesService);
-  return coursesService.loadCourseById(courseId);
+  async (route: ActivatedRouteSnapshot,
+   state: RouterStateSnapshot) => {
+    const courseId = route.paramMap.get("courseId");
+    if (!courseId) {
+      return null;
+    }
+    const coursesService = inject(CoursesService);
+    return coursesService.getCourseById(courseId);
 }