movie-performance component links to /selection/performance/:id 🚀

src/app/movie-performance/movie-performance.component.html

@@ -1,4 +1,4 @@
-<a routerLink="/schedule" class="bg-gray-200 m-2 flex flex-col items-center justify-between rounded-md overflow-hidden text-xl shadow-lg transform transition-all duration-300 hover:scale-105">
+<a [routerLink]="route" class="bg-gray-200 m-2 flex flex-col items-center justify-between rounded-md overflow-hidden text-xl shadow-lg transform transition-all duration-300 hover:scale-105">
 
   <div class="bg-gradient-to-r from-indigo-500 to-pink-600 w-full text-center text-white font-medium rounded-t-md py-0.5 px-2">
     <p>{{ hall() }}</p>

src/app/movie-performance/movie-performance.component.ts

@@ -1,4 +1,4 @@
-import { Component, input, computed } from '@angular/core';
+import {Component, input, computed, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-movie-performance',
@@ -6,12 +6,18 @@ import { Component, input, computed } from '@angular/core';
   templateUrl: './movie-performance.component.html',
   styleUrl: './movie-performance.component.css'
 })
-export class MoviePerformanceComponent {
+export class MoviePerformanceComponent implements OnInit {
   id = input.required<number>();
   hall = input.required<string>();
   start = input.required<Date>();
   utilisation = input<number | undefined>();
 
+  route: string = '';
+
+  ngOnInit() {
+    this.route = `../selection/performance/${this.id()}`;
+  }
+
   startTime = computed(() =>
     this.start().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
   );
@@ -43,4 +49,5 @@ export class MoviePerformanceComponent {
     return '';
   });
 
+
 }