Made project item redirect to project details on click

src/app/components/project-item/project-item.component.css

@@ -8,6 +8,11 @@
   border-left: 4px solid #667eea;
 }
 
+.project-item.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
 .project-item:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   transform: translateY(-2px);

src/app/components/project-item/project-item.component.html

@@ -1,4 +1,8 @@
-<div class="project-item" (click)="onProjectClick()">
+<div
+  class="project-item"
+  [class.is-disabled]="!projectRoute"
+  [routerLink]="projectRoute"
+>
   <div class="project-header">
     <h3 class="project-title">{{ project.name }}</h3>
   </div>

src/app/components/project-item/project-item.component.ts

@@ -1,19 +1,33 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
 import { Project } from '../../models/projects.models';
 
 @Component({
   selector: 'app-project-item',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterLink],
   templateUrl: './project-item.component.html',
   styleUrl: './project-item.component.css'
 })
 export class ProjectItemComponent {
   @Input({ required: true }) project!: Project;
-  @Output() projectClick = new EventEmitter<Project>();
 
-  onProjectClick() {
+  get projectRoute(): Array<string | number> | null {
-    this.projectClick.emit(this.project);
+    const id = this.getProjectId();
+    return id == null ? null : ['/projects', id];
+  }
+
+  get projectState(): { project: Project } | null {
+    return this.projectRoute ? { project: this.project } : null;
+  }
+
+  private getProjectId(): string | number | null {
+    const projectAsAny = this.project as Project & {
+      _id?: string | number;
+      projectId?: string | number;
+    };
+
+    return projectAsAny.id ?? projectAsAny.projectId ?? projectAsAny._id ?? null;
   }
 }

src/app/pages/home/home.component.html

@@ -10,7 +10,7 @@
     <div class="projects-grid">
       @if (projectList.length > 0) {
         @for (project of projectList; track project.id) {
-          <app-project-item [project]="project" (projectClick)="onProjectClick($event)" />
+          <app-project-item [project]="project" />
         }
       } @else {
         <div class="no-projects">

src/app/pages/home/home.component.ts

@@ -20,10 +20,6 @@ export class HomeComponent {
     return this.authService.currentUser()?.projects ?? [];
   }
 
-  onProjectClick(project: Project) {
-    this.router.navigate(['/projects', project.id]);
-  }
-
   onCreateProject() {
     this.router.navigate(['/projects/new']);
   }