frontend/src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes, provideRouter, withComponentInputBinding } from '@angular/router';
 import { StudentListComponent } from './components/students/student-list/student-list.component';
 import { VisitsComponent } from './components/visits/visits.component';
 import { VisitsDatetimeComponent } from './components/visits/visits-datetime/visits-datetime.component';
@@ -17,5 +17,6 @@ const routes: Routes = [
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
+  providers: [provideRouter(routes, withComponentInputBinding())]
 })
 export class AppRoutingModule {}

frontend/src/app/components/visits/visits.component.ts

@@ -1,5 +1,5 @@
 import { formatDate } from '@angular/common';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
@@ -16,14 +16,17 @@ import { VisitsService } from 'src/app/services/visits/visits.service';
   templateUrl: './visits.component.html',
   styleUrls: ['./visits.component.scss'],
 })
-export class VisitsComponent implements OnInit, OnDestroy {
+export class VisitsComponent implements OnInit {
+  @Input()
+  public date!: string;
+  @Input()
+  public time!: string;
+
   public loading: boolean = true;
   public courseVisit?: CourseVisit;
   public dataSource = new MatTableDataSource<StudentVisit>();
-
   public addedStudent?: Student;
 
-  private routerSubscription?: Subscription;
   private courseDate: Date = new Date();
 
   public constructor(
@@ -33,26 +36,17 @@ export class VisitsComponent implements OnInit, OnDestroy {
   ) {}
 
   public ngOnInit() {
-    this.routerSubscription = this.route.params.subscribe(params => {
-      const date: string = params['date'];
-      const time: string = params['time'];
+    if (this.date?.length == 8 && this.time?.length >= 3) {
+      const fulltime = this.time.padStart(4, '0');
+      const datetime = `${this.date.substring(0, 4)}-${this.date.substring(4, 6)}-${this.date.substring(6, 8)} ${fulltime.substring(0, 2)}:${fulltime.substring(2, 4)}:00`;
 
-      if (date?.length == 8 && time?.length >= 3) {
-        const fulltime = time.padStart(4, '0');
-        const datetime = `${date.substring(0, 4)}-${date.substring(4, 6)}-${date.substring(6, 8)} ${fulltime.substring(0, 2)}:${fulltime.substring(2, 4)}:00`;
-
-        const dateobj = new Date(datetime);
-        if (dateobj) {
-          this.courseDate = dateobj;
-        }
+      const dateobj = new Date(datetime);
+      if (dateobj) {
+        this.courseDate = dateobj;
       }
+    }
 
-      this.getData();
-    });
-  }
-
-  public ngOnDestroy() {
-    this.routerSubscription?.unsubscribe();
+    this.getData();
   }
 
   public visit(studentVisit: StudentVisit): void {