more fixes

src/app/app.component.ts

@@ -22,8 +22,10 @@ import { LocaleStore } from './translations/locale.service';
 				<span class="app-title">StudentInfo</span>
 			</div>
 			<nav class="navbar-center">
-				<a routerLink="/students" routerLinkActive="active">Overview</a>
-				<a routerLink="/students/add" routerLinkActive="active">Add Student</a>
+				<a [routerLink]="overviewUrl()" routerLinkActive="active">Overview</a>
+				<a [routerLink]="addStudentUrl()" routerLinkActive="active"
+					>Add Student</a
+				>
 			</nav>
 			<div class="navbar-right">
 				<button
@@ -220,6 +222,9 @@ export class App implements OnInit {
 
 	isDarkMode = computed(() => this.theme() === 'dark');
 
+	overviewUrl = computed(() => `/${this.currentLocale()}/students`);
+	addStudentUrl = computed(() => `/${this.currentLocale()}/students/add`);
+
 	ngOnInit() {
 		this.applyTheme();
 	}

src/app/edit-student.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, computed, inject, OnInit } from '@angular/core';
+import { Component, computed, inject, OnInit, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { queryParam } from '@mmstack/router-core';
@@ -22,14 +22,14 @@ import { LocaleStore } from './translations/locale.service';
 	template: `
 		<div class="card-container">
 			<h2 class="page-title">Edit Student</h2>
-			<div *ngIf="student(); else notFound">
+			@if (student()) {
 			<form #f="ngForm">
 				<div class="form-field">
 					<label for="name">Name:</label>
 					<input
 						id="name"
 						pInputText
-							[ngModel]="student()?.name"
+						[(ngModel)]="editedStudent().name"
 						name="name"
 					/>
 				</div>
@@ -38,7 +38,7 @@ import { LocaleStore } from './translations/locale.service';
 					<input
 						id="email"
 						pInputText
-							[ngModel]="student()?.email"
+						[(ngModel)]="editedStudent().email"
 						name="email"
 					/>
 				</div>
@@ -47,7 +47,7 @@ import { LocaleStore } from './translations/locale.service';
 					<p-multiselect
 						id="courses"
 						[options]="courseOptions()"
-							[(ngModel)]="student()!.courses"
+						[(ngModel)]="editedStudent().courses"
 						name="courses"
 						placeholder="Select Courses"
 						[showToggleAll]="true"
@@ -71,9 +71,7 @@ import { LocaleStore } from './translations/locale.service';
 					></button>
 				</div>
 			</form>
-			</div>
-
-			<ng-template #notFound>
+			} @if (!student()) {
 			<div class="not-found-message">
 				<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
 				<p>Student not found. Please return to the overview page.</p>
@@ -85,7 +83,7 @@ import { LocaleStore } from './translations/locale.service';
 					(click)="cancel()"
 				></button>
 			</div>
-			</ng-template>
+			}
 		</div>
 	`,
 	styles: [
@@ -155,6 +153,13 @@ export class EditStudentComponent implements OnInit {
 		this.studentService.getStudentById(this.queryId() ?? '')
 	);
 
+	protected editedStudent = signal({
+		id: '',
+		name: '',
+		email: '',
+		courses: [] as string[],
+	});
+
 	protected courseOptions = computed(() => {
 		return [
 			'Mathematics',
@@ -169,13 +174,21 @@ export class EditStudentComponent implements OnInit {
 	});
 
 	ngOnInit() {
-		if (!this.student()) {
+		const currentStudent = this.student();
+		if (currentStudent) {
+			this.editedStudent.set({
+				id: currentStudent.id,
+				name: currentStudent.name,
+				email: currentStudent.email,
+				courses: [...currentStudent.courses],
+			});
+		} else {
 			console.error('Student not found');
 		}
 	}
 
 	save() {
-		this.studentService.updateStudent(this.student()!);
+		this.studentService.updateStudent(this.editedStudent());
 		this.router.navigate([`/${this.localeStore.getCurrentLocale()}/students`]);
 	}
 

src/app/student.service.ts

@@ -35,9 +35,9 @@ export class StudentService {
 		return this.students().find((student) => student.id === id);
 	}
 
-	updateStudent(student: Student) {
+	updateStudent(student: Partial<Student>) {
 		this.students.update((students) =>
-			students.map((s) => (s.id === student.id ? student : s))
+			students.map((s) => (s.id === student.id ? { ...s, ...student } : s))
 		);
 	}
 
@@ -56,4 +56,3 @@ export class StudentService {
 		this.students.update((students) => students.filter((s) => s.id !== id));
 	}
 }
-