Upgraded to Angular 16

Author: jhades

README.md

@@ -3,7 +3,7 @@
 
 This repository contains the code of the [Angular Material In Depth](https://angular-university.io/course/angular-material-course) video course.
 
-This course repository is updated to Angular 15:
+This course repository is updated to Angular 16:
 
 ![Angular Material In Depth](https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-material-course-1.jpg)
 

src/app/app-routing.module.ts

@@ -3,7 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import {HomeComponent} from "./home/home.component";
 import {AboutComponent} from "./about/about.component";
 import {CourseComponent} from "./course/course.component";
-import {CourseResolver} from "./services/course.resolver";
+import {courseResolver} from "./services/course.resolver";
 import {CreateCourseComponent} from './create-course/create-course.component';
 import {DragDropComponent} from './drag-drop/drag-drop.component';
 import {TreeDemoComponent} from './tree-demo/tree-demo.component';
@@ -23,7 +23,7 @@ const routes: Routes = [
         path: 'courses/:id',
         component: CourseComponent,
         resolve: {
-            course: CourseResolver
+            course: courseResolver
         }
     },
   {

src/app/app.module.ts

@@ -26,7 +26,6 @@ import {  MatTableModule } from "@angular/material/table";
 import { MatToolbarModule } from "@angular/material/toolbar";
 import {CoursesService} from "./services/courses.service";
 import {HttpClientModule} from "@angular/common/http";
-import {CourseResolver} from "./services/course.resolver";
 import { CourseDialogComponent } from './course-dialog/course-dialog.component';
 import { ReactiveFormsModule} from "@angular/forms";
 import {CreateCourseComponent} from './create-course/create-course.component';
@@ -96,8 +95,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
         ScrollingModule
     ],
     providers: [
-        CoursesService,
-        CourseResolver
+        CoursesService
     ],
     bootstrap: [AppComponent]
 })

src/app/services/course.resolver.ts

@@ -1,24 +1,14 @@
-
-
-
-import {Injectable} from "@angular/core";
-import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from "@angular/router";
+import {inject} from '@angular/core';
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
 import {Course} from "../model/course";
 import {Observable} from "rxjs";
 import {CoursesService} from "./courses.service";
 
 
+export function courseResolver(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course> {
 
-@Injectable()
-export class CourseResolver implements Resolve<Course> {
+  const coursesService = inject(CoursesService);
 
-    constructor(private coursesService:CoursesService) {
-
-    }
-
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course> {
-        return this.coursesService.findCourseById(route.params['id']);
-    }
+  return coursesService.findCourseById(route.params['id']);
 
 }
-