in28minutes · bsmahi · Mar 15, 2025 · Mar 18, 2025
diff --git a/99-reuse/01-spring-security.md b/99-reuse/01-spring-security.md
@@ -6,7 +6,7 @@
     <parent>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-parent</artifactId>
-        <version>3.0.1</version>
+        <version>3.4.3</version>
         <relativePath /> <!-- lookup parent from repository -->
     </parent>
 ```

diff --git a/MigrateToAngular19Features.md b/MigrateToAngular19Features.md
diff --git a/frontend/todo/angular.json b/frontend/todo/angular.json
@@ -11,11 +11,12 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/todo",
+            "outputPath": {
+              "base": "dist/todo"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -27,7 +28,8 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -46,9 +48,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true

diff --git a/frontend/todo/package-lock.json b/frontend/todo/package-lock.json
diff --git a/frontend/todo/package.json b/frontend/todo/package.json
@@ -10,29 +10,29 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.0.1",
-    "@angular/common": "^19.0.1",
-    "@angular/compiler": "^19.0.1",
-    "@angular/core": "^19.0.1",
-    "@angular/forms": "^19.0.1",
-    "@angular/platform-browser": "^19.0.1",
-    "@angular/platform-browser-dynamic": "^19.0.1",
-    "@angular/router": "^19.0.1",
-    "rxjs": "~7.8.1",
-    "tslib": "^2.6.2",
+    "@angular/animations": "^19.2.2",
+    "@angular/common": "^19.2.2",
+    "@angular/compiler": "^19.2.2",
+    "@angular/core": "^19.2.2",
+    "@angular/forms": "^19.2.2",
+    "@angular/platform-browser": "^19.2.2",
+    "@angular/platform-browser-dynamic": "^19.2.2",
+    "@angular/router": "^19.2.2",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.0.2",
-    "@angular/cli": "~19.0.2",
-    "@angular/compiler-cli": "^19.0.1",
-    "@types/jasmine": "~4.3.0",
-    "jasmine-core": "~4.5.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.2.0",
+    "@angular-devkit/build-angular": "^19.2.2",
+    "@angular/cli": "~19.2.2",
+    "@angular/compiler-cli": "^19.2.2",
+    "@types/jasmine": "~5.1.7",
+    "jasmine-core": "~5.6.0",
+    "karma": "~6.4.4",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~5.5.4"
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.8.2"
   }
 }
diff --git a/frontend/todo/src/app/app-routing.module.ts b/frontend/todo/src/app/app-routing.module.ts
@@ -1,23 +1,18 @@
-import { TodoComponent } from './todo/todo.component';
+
 import { RouteGuardService } from './service/route-guard.service';
-import { LogoutComponent } from './logout/logout.component';
-import { ListTodosComponent } from './list-todos/list-todos.component';
-import { WelcomeComponent } from './welcome/welcome.component';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { LoginComponent } from './login/login.component';
-import { ErrorComponent } from './error/error.component';
 
 // welcome 
 const routes: Routes = [
-  { path: '', component: LoginComponent  },//canActivate, RouteGuardService
-  { path: 'login', component: LoginComponent },
-  { path: 'welcome/:name', component: WelcomeComponent, canActivate:[RouteGuardService]},
-  { path: 'todos', component: ListTodosComponent, canActivate:[RouteGuardService] },
-  { path: 'logout', component: LogoutComponent, canActivate:[RouteGuardService] },
-  { path: 'todos/:id', component: TodoComponent, canActivate:[RouteGuardService] },
+  { path: '', loadComponent: () => import('./login/login.component').then(m => m.LoginComponent)  },//canActivate, RouteGuardService
+  { path: 'login', loadComponent: () => import('./login/login.component').then(m => m.LoginComponent) },
+  { path: 'welcome/:name', loadComponent: () => import('./welcome/welcome.component').then(m => m.WelcomeComponent), canActivate:[RouteGuardService]},
+  { path: 'todos', loadComponent: () => import('./list-todos/list-todos.component').then(m => m.ListTodosComponent), canActivate:[RouteGuardService] },
+  { path: 'logout', loadComponent: () => import('./logout/logout.component').then(m => m.LogoutComponent), canActivate:[RouteGuardService] },
+  { path: 'todos/:id', loadComponent: () => import('./todo/todo.component').then(m => m.TodoComponent), canActivate:[RouteGuardService] },
 
-  { path: '**', component: ErrorComponent }
+  { path: '**', loadComponent: () => import('./error/error.component').then(m => m.ErrorComponent) }
 ];
 
 @NgModule({

diff --git a/frontend/todo/src/app/app.routes.ts b/frontend/todo/src/app/app.routes.ts
@@ -1,20 +1,14 @@
-import { TodoComponent } from './todo/todo.component';
 import { RouteGuardService } from './service/route-guard.service';
-import { LogoutComponent } from './logout/logout.component';
-import { ListTodosComponent } from './list-todos/list-todos.component';
-import { WelcomeComponent } from './welcome/welcome.component';
 import { Routes } from '@angular/router';
-import { LoginComponent } from './login/login.component';
-import { ErrorComponent } from './error/error.component';
 
 // welcome 
 export const routes: Routes = [
-  { path: '', component: LoginComponent  },//canActivate, RouteGuardService
-  { path: 'login', component: LoginComponent },
-  { path: 'welcome/:name', component: WelcomeComponent, canActivate:[RouteGuardService]},
-  { path: 'todos', component: ListTodosComponent, canActivate:[RouteGuardService] },
-  { path: 'logout', component: LogoutComponent, canActivate:[RouteGuardService] },
-  { path: 'todos/:id', component: TodoComponent, canActivate:[RouteGuardService] },
+  { path: '', loadComponent: () => import('./login/login.component').then(m => m.LoginComponent)  },//canActivate, RouteGuardService
+  { path: 'login', loadComponent: () => import('./login/login.component').then(m => m.LoginComponent) },
+  { path: 'welcome/:name', loadComponent: () => import('./welcome/welcome.component').then(m => m.WelcomeComponent), canActivate:[RouteGuardService]},
+  { path: 'todos', loadComponent: () => import('./list-todos/list-todos.component').then(m => m.ListTodosComponent), canActivate:[RouteGuardService] },
+  { path: 'logout', loadComponent: () => import('./logout/logout.component').then(m => m.LogoutComponent), canActivate:[RouteGuardService] },
+  { path: 'todos/:id', loadComponent: () => import('./todo/todo.component').then(m => m.TodoComponent), canActivate:[RouteGuardService] },
 
-  { path: '**', component: ErrorComponent }
+  { path: '**', loadComponent: () => import('./error/error.component').then(m => m.ErrorComponent) }
 ];
diff --git a/frontend/todo/src/app/list-todos/list-todos.component.html b/frontend/todo/src/app/list-todos/list-todos.component.html
@@ -1,6 +1,8 @@
 <h1> Todo </h1>
 
-<div class="alert alert-success" *ngIf='message'>{{message}}</div>
+@if (message) {
+  <div class="alert alert-success">{{message}}</div>
+}
 
 <div class="container">
   <table class="table">
@@ -15,20 +17,22 @@ <h1> Todo </h1>
     </thead>
     <tbody>
       <!--   for (Todo todo: todos) {  -->
-              <tr *ngFor="let todo of todos">
-                <td>{{todo.description}}</td>
-                <td>{{todo.targetDate | date | uppercase}}</td>
-                <td>{{todo.done}}</td>
-                <td><button (click)="updateTodo(todo.id)" class="btn btn-success">Update</button></td>
-                <td><button (click)="deleteTodo(todo.id)" class="btn btn-warning">Delete</button></td>
-              </tr>
+      @for (todo of todos; track todo) {
+        <tr>
+          <td>{{todo.description}}</td>
+          <td>{{todo.targetDate | date | uppercase}}</td>
+          <td>{{todo.done}}</td>
+          <td><button (click)="updateTodo(todo.id)" class="btn btn-success">Update</button></td>
+          <td><button (click)="deleteTodo(todo.id)" class="btn btn-warning">Delete</button></td>
+        </tr>
+      }
       <!-- } -->
     </tbody>
 
   </table>
 
   <div class="row">
-      <button (click)="addTodo()" class="btn btn-success">Add</button>
+    <button (click)="addTodo()" class="btn btn-success">Add</button>
   </div>
 
 </div>
diff --git a/frontend/todo/src/app/list-todos/list-todos.component.ts b/frontend/todo/src/app/list-todos/list-todos.component.ts
@@ -1,7 +1,7 @@
 import { TodoDataService } from './../service/data/todo-data.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { Router } from '@angular/router';
-import { NgIf, NgFor, UpperCasePipe, DatePipe } from '@angular/common';
+import { UpperCasePipe, DatePipe } from '@angular/common';
 
 export class Todo {
   constructor(
@@ -19,33 +19,17 @@ export class Todo {
     templateUrl: './list-todos.component.html',
     styleUrls: ['./list-todos.component.css'],
     standalone: true,
-    imports: [NgIf, NgFor, UpperCasePipe, DatePipe]
+    imports: [UpperCasePipe, DatePipe]
 })
 export class ListTodosComponent implements OnInit {
+  private todoService = inject(TodoDataService);
+  private router = inject(Router);
+
 
   todos: Todo[] = [];
 
   message: string = '';
 
-  // = [
-  //   new Todo(1, 'Learn to Dance', false, new Date()),
-  //   new Todo(2, 'Become an Expert at Angular', false, new Date()),
-  //   new Todo(3, 'Visit India', false, new Date())
-  //   // {id : 1, description : },
-  //   // {id : 2, description : ''},
-  //   // {id : 3, description : 'Visit India'}
-  // ]
-
-  // todo = {
-  //     id : 1,
-  //     description: 'Learn to Dance'
-  // }
-
-  constructor(
-    private todoService: TodoDataService,
-    private router: Router
-  ) { }
-
   ngOnInit() {
     this.refreshTodos();
   }

diff --git a/frontend/todo/src/app/login/login.component.html b/frontend/todo/src/app/login/login.component.html
@@ -1,7 +1,9 @@
 <H1>Login!</H1>
 
 <div class="container">
-  <div class="alert alert-warning" *ngIf='invalidLogin'>{{errorMessage}}</div>
+  @if (invalidLogin) {
+    <div class="alert alert-warning">{{errorMessage}}</div>
+  }
 
   <div>
     User Name : <input type="text" name="username" [(ngModel)]="username">
@@ -12,6 +14,6 @@ <H1>Login!</H1>
     <!-- <button (click)=handleLogin() class="btn btn-success">Login</button> -->
     <!-- <button (click)=handleBasicAuthLogin() class="btn btn-success">Login</button> -->
     <button (click)=handleJWTAuthLogin() class="btn btn-success">Login</button>
-    
+
   </div>
 </div>
diff --git a/frontend/todo/src/app/login/login.component.ts b/frontend/todo/src/app/login/login.component.ts
@@ -1,31 +1,28 @@
 import { BasicAuthenticationService } from './../service/basic-authentication.service';
 import { HardcodedAuthenticationService } from './../service/hardcoded-authentication.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
-import { NgIf } from '@angular/common';
+
 
 @Component({
     selector: 'app-login',
     templateUrl: './login.component.html',
     styleUrls: ['./login.component.css'],
     standalone: true,
-    imports: [NgIf, FormsModule]
+    imports: [FormsModule]
 })
 export class LoginComponent implements OnInit {
+  private router = inject(Router);
+  private hardcodedAuthenticationService = inject(HardcodedAuthenticationService);
+  private basicAuthenticationService = inject(BasicAuthenticationService);
+
 
   username = 'in28minutes'
   password = ''
   errorMessage = 'Invalid Credentials'
   invalidLogin = false
 
-  //Router
-  //Angular.giveMeRouter
-  //Dependency Injection
-  constructor(private router: Router,
-    private hardcodedAuthenticationService: HardcodedAuthenticationService,
-    private basicAuthenticationService: BasicAuthenticationService) { }
-
   ngOnInit() {
   }
 

diff --git a/frontend/todo/src/app/logout/logout.component.ts b/frontend/todo/src/app/logout/logout.component.ts
@@ -1,5 +1,5 @@
 import { HardcodedAuthenticationService } from './../service/hardcoded-authentication.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 
 @Component({
     selector: 'app-logout',
@@ -8,10 +8,8 @@ import { Component, OnInit } from '@angular/core';
     standalone: true
 })
 export class LogoutComponent implements OnInit {
+  private hardcodedAuthenticationService = inject(HardcodedAuthenticationService);
 
-  constructor(
-    private hardcodedAuthenticationService: HardcodedAuthenticationService
-  ) { }
 
   ngOnInit() {
     this.hardcodedAuthenticationService.logout();

diff --git a/frontend/todo/src/app/menu/menu.component.html b/frontend/todo/src/app/menu/menu.component.html
@@ -1,16 +1,24 @@
 <header>
-    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
-        <div><a href="https://www.in28minutes.com" class="navbar-brand">
-            in28minutes</a></div>
+  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+    <div><a href="https://www.in28minutes.com" class="navbar-brand">
+    in28minutes</a></div>
 
-        <ul class="navbar-nav">
-            <li><a *ngIf="hardcodedAuthenticationService.isUserLoggedIn()" routerLink="/welcome/in28minutes" class="nav-link">Home</a></li>
-            <li><a *ngIf="hardcodedAuthenticationService.isUserLoggedIn()" routerLink="/todos" class="nav-link">Todos</a></li>
-        </ul>
+    <ul class="navbar-nav">
+      <li>@if (hardcodedAuthenticationService.isUserLoggedIn()) {
+        <a routerLink="/welcome/in28minutes" class="nav-link">Home</a>
+      }</li>
+      <li>@if (hardcodedAuthenticationService.isUserLoggedIn()) {
+        <a routerLink="/todos" class="nav-link">Todos</a>
+      }</li>
+    </ul>
 
-        <ul class="navbar-nav navbar-collapse justify-content-end">
-                <li><a *ngIf="!hardcodedAuthenticationService.isUserLoggedIn()" routerLink="/login" class="nav-link">Login</a></li>
-                <li><a *ngIf="hardcodedAuthenticationService.isUserLoggedIn()" routerLink="/logout" class="nav-link">Logout</a></li>
-        </ul>
-    </nav>
+    <ul class="navbar-nav navbar-collapse justify-content-end">
+      <li>@if (!hardcodedAuthenticationService.isUserLoggedIn()) {
+        <a routerLink="/login" class="nav-link">Login</a>
+      }</li>
+      <li>@if (hardcodedAuthenticationService.isUserLoggedIn()) {
+        <a routerLink="/logout" class="nav-link">Logout</a>
+      }</li>
+    </ul>
+  </nav>
 </header>
diff --git a/frontend/todo/src/app/menu/menu.component.ts b/frontend/todo/src/app/menu/menu.component.ts
@@ -1,20 +1,18 @@
 import { HardcodedAuthenticationService } from './../service/hardcoded-authentication.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { NgIf } from '@angular/common';
+
 
 @Component({
     selector: 'app-menu',
     templateUrl: './menu.component.html',
     styleUrls: ['./menu.component.css'],
     standalone: true,
-    imports: [NgIf, RouterLink]
+    imports: [RouterLink]
 })
 export class MenuComponent implements OnInit {
-  //isUserLoggedIn: boolean = false;
+  hardcodedAuthenticationService = inject(HardcodedAuthenticationService);
 
-  constructor(public hardcodedAuthenticationService
-    : HardcodedAuthenticationService) { }
 
   ngOnInit() {
     //this.isUserLoggedIn = this.hardcodedAuthenticationService.isUserLoggedIn();

diff --git a/frontend/todo/src/app/service/basic-authentication.service.ts b/frontend/todo/src/app/service/basic-authentication.service.ts
@@ -1,6 +1,6 @@
 import { API_URL } from './../app.constants';
 import { HttpHeaders, HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { map } from 'rxjs/operators';
 
 export const TOKEN = 'token'
@@ -10,8 +10,8 @@ export const AUTHENTICATED_USER = 'authenticaterUser'
   providedIn: 'root'
 })
 export class BasicAuthenticationService {
+  private http = inject(HttpClient);
 
-  constructor(private http: HttpClient) { }
 
   executeJWTAuthenticationService(username: string, password: string) {
 

diff --git a/frontend/todo/src/app/service/data/todo-data.service.ts b/frontend/todo/src/app/service/data/todo-data.service.ts
@@ -1,16 +1,14 @@
 import { TODO_JPA_API_URL } from './../../app.constants';
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Todo } from '../../list-todos/list-todos.component';
 
 @Injectable({
   providedIn: 'root'
 })
 export class TodoDataService {
+  private http = inject(HttpClient);
 
-  constructor(
-    private http: HttpClient
-  ) { }
 
   retrieveAllTodos(username: string) {
     return this.http.get<Todo[]>(`${TODO_JPA_API_URL}/users/${username}/todos`);

diff --git a/frontend/todo/src/app/service/data/welcome-data.service.ts b/frontend/todo/src/app/service/data/welcome-data.service.ts
@@ -1,5 +1,5 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 export class HelloWorldBean {
   constructor(public message: string) { }
@@ -9,10 +9,8 @@ export class HelloWorldBean {
   providedIn: 'root'
 })
 export class WelcomeDataService {
+  private http = inject(HttpClient);
 
-  constructor(
-    private http: HttpClient
-  ) { }
 
   executeHelloWorldBeanService() {
     return this.http.get<HelloWorldBean>('http://localhost:8080/hello-world-bean');

diff --git a/frontend/todo/src/app/service/http/http-intercepter-basic-auth.service.ts b/frontend/todo/src/app/service/http/http-intercepter-basic-auth.service.ts
@@ -1,15 +1,13 @@
 import { BasicAuthenticationService } from './../basic-authentication.service';
 import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class HttpIntercepterBasicAuthService implements HttpInterceptor{
+  private basicAuthenticationService = inject(BasicAuthenticationService);
 
-  constructor(
-    private basicAuthenticationService : BasicAuthenticationService
-  ) { }
 
   intercept(request: HttpRequest<any>, next: HttpHandler){
     // let username = 'in28minutes'

diff --git a/frontend/todo/src/app/service/route-guard.service.ts b/frontend/todo/src/app/service/route-guard.service.ts
@@ -1,17 +1,14 @@
 import { HardcodedAuthenticationService } from './hardcoded-authentication.service';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
 
 @Injectable({
   providedIn: 'root'
 })
 export class RouteGuardService implements CanActivate {
+  private hardcodedAuthenticationService = inject(HardcodedAuthenticationService);
+  private router = inject(Router);
 
-  constructor(
-    private hardcodedAuthenticationService: HardcodedAuthenticationService,
-    private router: Router) {
-
-  }
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
 

diff --git a/frontend/todo/src/app/todo/todo.component.html b/frontend/todo/src/app/todo/todo.component.html
@@ -1,26 +1,32 @@
 <H1>Todo</H1>
 
 <div class="container">
-  <div class="alert alert-warning" *ngIf="todoForm.dirty && todoForm.invalid">Enter valid values</div>
-  <div class="alert alert-warning" *ngIf="todoForm.dirty && targetDate.invalid">Enter valid Target Date</div>
-  <div class="alert alert-warning" *ngIf="todoForm.dirty && description.invalid">Enter atleast 5 characters in Description</div>
-
+  @if (todoForm.dirty && todoForm.invalid) {
+    <div class="alert alert-warning">Enter valid values</div>
+  }
+  @if (todoForm.dirty && targetDate.invalid) {
+    <div class="alert alert-warning">Enter valid Target Date</div>
+  }
+  @if (todoForm.dirty && description.invalid) {
+    <div class="alert alert-warning">Enter atleast 5 characters in Description</div>
+  }
+
   <form (ngSubmit)="!todoForm.invalid && saveTodo()" #todoForm="ngForm">
     <fieldset class="form-group">
       <label>Description</label>
-      <input type="text" #description="ngModel" 
-            [(ngModel)]="todo.description" class="form-control" 
-                name="description" required="required" minlength="5">
+      <input type="text" #description="ngModel"
+        [(ngModel)]="todo.description" class="form-control"
+        name="description" required="required" minlength="5">
     </fieldset>
 
     <fieldset class="form-group">
-        <label>Target Date</label>
-        <input type="date" #targetDate="ngModel"
+      <label>Target Date</label>
+      <input type="date" #targetDate="ngModel"
         [ngModel]="todo.targetDate | date:'yyyy-MM-dd' "
         (ngModelChange)="todo.targetDate = $event"
         class="form-control" name="targetDate" required="required" >
     </fieldset>
 
     <button type="submit" class="btn btn-success">Save</button>
-  </form>  
+  </form>
 </div>
diff --git a/frontend/todo/src/app/todo/todo.component.ts b/frontend/todo/src/app/todo/todo.component.ts
@@ -1,28 +1,26 @@
 import { ActivatedRoute, Router } from '@angular/router';
 import { TodoDataService } from './../service/data/todo-data.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { Todo } from '../list-todos/list-todos.component';
 import { FormsModule } from '@angular/forms';
-import { NgIf, DatePipe } from '@angular/common';
+import { DatePipe } from '@angular/common';
 
 @Component({
     selector: 'app-todo',
     templateUrl: './todo.component.html',
     styleUrls: ['./todo.component.css'],
     standalone: true,
-    imports: [NgIf, FormsModule, DatePipe]
+    imports: [FormsModule, DatePipe]
 })
 export class TodoComponent implements OnInit {
+  private todoService = inject(TodoDataService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
 
   id: number = 0;
   todo: Todo = new Todo(this.id, '', false, new Date());
 
-  constructor(
-    private todoService: TodoDataService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) { }
-
   ngOnInit() {
 
     this.id = this.route.snapshot.params['id'];

diff --git a/frontend/todo/src/app/welcome/welcome.component.html b/frontend/todo/src/app/welcome/welcome.component.html
@@ -5,11 +5,13 @@ <H1>Welcome!</H1>
 </div>
 
 <div class="container">
-  Click here to get a customized welcome message 
+  Click here to get a customized welcome message
   <button (click)="getWelcomeMessageWithParameter()" class="btn btn-success">Get Welcome Message</button>
 </div>
 
-<div class="container" *ngIf="welcomeMessageFromService">
+@if (welcomeMessageFromService) {
+  <div class="container">
     <H2>Your Customized Welcome Message</H2>
     {{welcomeMessageFromService}}
-  </div>
+  </div>
+}
diff --git a/frontend/todo/src/app/welcome/welcome.component.ts b/frontend/todo/src/app/welcome/welcome.component.ts
@@ -3,8 +3,8 @@ import { ActivatedRoute, RouterLink } from '@angular/router';
 //package com.in28minutes.springboot.web;
 
 //import org.springframework.boot.SpringApplication;
-import { Component, OnInit } from '@angular/core';//'./app.component';
-import { NgIf } from '@angular/common';
+import { Component, OnInit, inject } from '@angular/core';//'./app.component';
+
 //import { AppComponent } from '../app.component';
 
 //@ComponentScan(
@@ -14,25 +14,18 @@ import { NgIf } from '@angular/common';
     templateUrl: './welcome.component.html',
     styleUrls: ['./welcome.component.css'],
     standalone: true,
-    imports: [RouterLink, NgIf]
+    imports: [RouterLink]
 })
 
 //public class SpringBootFirstWebApplication implements SomeInterface{
 export class WelcomeComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private service = inject(WelcomeDataService);
+
 
   message = 'Some Welcome Message'
   welcomeMessageFromService: string = ''
   name = ''
-  //String message = "Some Welcome Message"
-
-  //public SpringBootFirstWebApplication() {	
-
-  //ActivatedRoute
-  constructor(
-    private route: ActivatedRoute,
-    private service: WelcomeDataService) {
-
-  }
 
   // void init() {
   ngOnInit() {

diff --git a/frontend/todo/src/styles.css b/frontend/todo/src/styles.css
@@ -1,2 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
-@import url(https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css)
+@import url(https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css);
diff --git a/frontend/todo/tsconfig.json b/frontend/todo/tsconfig.json
@@ -5,14 +5,14 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,

diff --git a/restful-web-services/pom.xml b/restful-web-services/pom.xml
@@ -14,7 +14,7 @@
 	<parent>
 		<groupId>org.springframework.boot</groupId>
 		<artifactId>spring-boot-starter-parent</artifactId>
-		<version>3.2.2</version>
+		<version>3.4.3</version>
 		<relativePath /> <!-- lookup parent from repository -->
 	</parent>
 

diff --git a/zz-spring-boot-in-10-steps/final.md b/zz-spring-boot-in-10-steps/final.md
@@ -38,7 +38,7 @@ off
 	<parent>
 		<groupId>org.springframework.boot</groupId>
 		<artifactId>spring-boot-starter-parent</artifactId>
-		<version>3.0.1</version>
+		<version>3.4.3</version>
 		<relativePath/> <!-- lookup parent from repository -->
 	</parent>
 	<groupId>com.in28minutes.springboot</groupId>

diff --git a/zz-spring-boot-in-10-steps/pom.xml b/zz-spring-boot-in-10-steps/pom.xml
@@ -5,7 +5,7 @@
 	<parent>
 		<groupId>org.springframework.boot</groupId>
 		<artifactId>spring-boot-starter-parent</artifactId>
-		<version>3.0.1</version>
+		<version>3.4.3</version>
 		<relativePath/> <!-- lookup parent from repository -->
 	</parent>
 	<groupId>com.in28minutes.springboot</groupId>