made signal required so no need for ?. operators, code updated and cl…

src/app/features/vehicles/components/vehicle-card/vehicle-card.component.html

@@ -3,14 +3,14 @@
     <img
       class="vehicle-card__image"
       [src]="imageUrl"
-      [alt]="vehicle.name"
+      [alt]="vehicle().name"
       loading="lazy"
     />
   </div>
 
   <div class="vehicle-card__body">
-    <h2 class="vehicle-card__name">{{ vehicle.name }}</h2>
-    <p class="vehicle-card__price">From {{ vehicle.price }}</p>
-    <p class="vehicle-card__description">{{ vehicle.description }}</p>
+    <h2 class="vehicle-card__name">{{ vehicle().name }}</h2>
+    <p class="vehicle-card__price">From {{ vehicle().price }}</p>
+    <p class="vehicle-card__description">{{ vehicle().description || 'test' }}</p>
   </div>
 </article>

src/app/features/vehicles/components/vehicle-card/vehicle-card.component.spec.ts

@@ -43,8 +43,8 @@ describe('VehicleCardComponent', () => {
     fixture = TestBed.createComponent(VehicleCardComponent);
     component = fixture.componentInstance;
 
-    // Set the required @Input before the first change detection cycle.
-    component.vehicle = mockVehicle;
+    // Signal inputs must be set via setInput() rather than direct assignment.
+    fixture.componentRef.setInput('vehicle', mockVehicle);
     fixture.detectChanges();
   });
 
@@ -62,15 +62,15 @@ describe('VehicleCardComponent', () => {
     });
 
     it('falls back to the first media item when no 16x9 url exists', () => {
-      component.vehicle = {
+      fixture.componentRef.setInput('vehicle', {
         ...mockVehicle,
         media: [{ name: 'xe 4x3', url: '/images/4x3/xe.jpg' }],
-      };
+      });
       expect(component.imageUrl).toBe('/images/4x3/xe.jpg');
     });
 
     it('returns an empty string when the media array is empty', () => {
-      component.vehicle = { ...mockVehicle, media: [] };
+      fixture.componentRef.setInput('vehicle', { ...mockVehicle, media: [] });
       expect(component.imageUrl).toBe('');
     });
   });

src/app/features/vehicles/components/vehicle-card/vehicle-card.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { AnyVehicle } from '../../../../core/interfaces/vehicle.interface';
 
 @Component({
@@ -9,29 +9,25 @@ import { AnyVehicle } from '../../../../core/interfaces/vehicle.interface';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class VehicleCardComponent {
-  // TODO refactor to use signals input
-  @Input({ required: true }) vehicle!: AnyVehicle;
+  vehicle = input.required<AnyVehicle>();
 
   /**
    * Used by the parent list to stagger the fade-in animation via
    * [style.animation-delay] bound on the host element.
    */
-  @Input() index = 0;
+  index = input(0);
 
   /**
    * Prefer the 16x9 image; CSS aspect-ratio + object-fit handles the
    * visual crop at all breakpoints so we never need to swap src.
    */
   get imageUrl(): string {
-    return (
-      this.vehicle.media.find((m) => m.url.includes('16x9'))?.url ??
-      this.vehicle.media[0]?.url ??
-      ''
-    );
+    const { media } = this.vehicle();
+    return media.find((m) => m.url.includes('16x9'))?.url ?? media[0]?.url ?? '';
   }
 
   get emissionsLabel(): string {
-    const { template, value } = this.vehicle.meta.emissions;
+    const { template, value } = this.vehicle().meta.emissions;
     return template.replace('$value', String(value));
   }
 }