feat: implement product detail and list components with search functionality

src/app/app.config.ts

@@ -1,12 +1,14 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
+import {provideHttpClient} from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes)
+    provideRouter(routes, withComponentInputBinding()),
+    provideHttpClient()
   ]
 };

src/app/app.routes.ts

@@ -1,3 +1,14 @@
 import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./features/product-list/product-list').then((m) => m.ProductList)
+  },
+  {
+    path: 'product/:id',
+    loadComponent: () =>
+      import('./features/product-detail/product-detail').then((m) => m.ProductDetail)
+  },
+  { path: '**', redirectTo: '' }
+];

src/app/features/product-detail/product-actions/product-actions.html

@@ -0,0 +1,32 @@
+<div class="product-actions">
+  <mat-form-field appearance="outline">
+    <mat-label>Colour</mat-label>
+    <mat-select [value]="selectedColorCode()" (selectionChange)="selectedColorCode.set($event.value)">
+      @for (color of options().colors; track color.code) {
+        <mat-option [value]="color.code">{{ color.name }}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field appearance="outline">
+    <mat-label>Storage</mat-label>
+    <mat-select
+      [value]="selectedStorageCode()"
+      (selectionChange)="selectedStorageCode.set($event.value)"
+    >
+      @for (storage of options().storages; track storage.code) {
+        <mat-option [value]="storage.code">{{ storage.name }}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  <button
+    mat-raised-button
+    color="primary"
+    class="product-actions__submit"
+    [disabled]="adding()"
+    (click)="onAddToCart()"
+  >
+    Añadir
+  </button>
+</div>

src/app/features/product-detail/product-actions/product-actions.scss

@@ -0,0 +1,15 @@
+.product-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 1rem;
+
+  mat-form-field {
+    width: 100%;
+  }
+
+  &__submit {
+    align-self: flex-start;
+    margin-top: 0.5rem;
+  }
+}

src/app/features/product-detail/product-actions/product-actions.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductActions } from './product-actions';
+
+describe('ProductActions', () => {
+  let component: ProductActions;
+  let fixture: ComponentFixture<ProductActions>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductActions]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProductActions);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/product-detail/product-actions/product-actions.ts

@@ -0,0 +1,55 @@
+import { Component, inject, input, linkedSignal, output, signal } from '@angular/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+import { ProductOptions } from '../../../core/models/product.model';
+import { CartService } from '../../../core/services/cart.service';
+
+@Component({
+  selector: 'app-product-actions',
+  imports: [MatFormFieldModule, MatSelectModule, MatButtonModule],
+  templateUrl: './product-actions.html',
+  styleUrl: './product-actions.scss'
+})
+export class ProductActions {
+  private readonly cartService = inject(CartService);
+  private readonly snackBar = inject(MatSnackBar);
+
+  readonly productId = input.required<string>();
+  readonly options = input.required<ProductOptions>();
+
+  readonly added = output<void>();
+
+  readonly selectedColorCode = linkedSignal(() => this.options().colors[0]?.code);
+
+  readonly selectedStorageCode = linkedSignal(() => this.options().storages[0]?.code);
+
+  readonly adding = signal(false);
+
+  async onAddToCart(): Promise<void> {
+    const colorCode = this.selectedColorCode();
+    const storageCode = this.selectedStorageCode();
+    if (colorCode === undefined || storageCode === undefined) {
+      return;
+    }
+
+    this.adding.set(true);
+    try {
+      await this.cartService.addToCart({
+        id: this.productId(),
+        colorCode,
+        storageCode
+      });
+      this.snackBar.open('Product added to cart', 'Close', { duration: 3000 });
+      this.added.emit();
+    } catch {
+      this.snackBar.open('We couldn\'t add the product to the cart', 'Close', {
+        duration: 3000
+      });
+    } finally {
+      this.adding.set(false);
+    }
+  }
+}

src/app/features/product-detail/product-description/product-description.html

@@ -0,0 +1,8 @@
+<dl class="product-description">
+  @for (row of rows(); track row.label) {
+    <div class="product-description__row">
+      <dt>{{ row.label }}</dt>
+      <dd>{{ row.value }}</dd>
+    </div>
+  }
+</dl>

src/app/features/product-detail/product-description/product-description.scss

@@ -0,0 +1,21 @@
+.product-description {
+  margin: 0;
+
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+
+    dt {
+      font-weight: 600;
+      opacity: 0.7;
+    }
+
+    dd {
+      margin: 0;
+      text-align: right;
+    }
+  }
+}

src/app/features/product-detail/product-description/product-description.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductDescription } from './product-description';
+
+describe('ProductDescription', () => {
+  let component: ProductDescription;
+  let fixture: ComponentFixture<ProductDescription>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductDescription]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProductDescription);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/product-detail/product-description/product-description.ts

@@ -0,0 +1,43 @@
+import { Component, computed, input } from '@angular/core';
+
+import { ProductDetail } from '../../../core/models/product.model';
+
+// used to renderize rows on for each description value
+interface DescriptionRow {
+  label: string;
+  value: string;
+}
+
+@Component({
+  selector: 'app-product-description',
+  templateUrl: './product-description.html',
+  styleUrl: './product-description.scss'
+})
+export class ProductDescription {
+
+  readonly product = input.required<ProductDetail>();
+
+  readonly rows = computed<DescriptionRow[]>(() => {
+    const p = this.product();
+    const cameras = [...(p.primaryCamera ?? []), ...(p.secondaryCmera ?? [])];
+
+    const candidates: DescriptionRow[] = [
+      { label: 'Brand', value: p.brand },
+      { label: 'Model', value: p.model },
+      { label: 'Price', value: `${p.price} €` },
+      { label: 'CPU', value: p.cpu ?? '' },
+      { label: 'RAM', value: p.ram ?? '' },
+      { label: 'OS', value: p.os ?? '' },
+      { label: 'Display Type', value: p.displayType ?? '' },
+      // Note: names on the API "displayResolution"/"displaySize" are swapped compared to their real content.
+      { label: 'Screen size', value: p.displayResolution ?? '' },
+      { label: 'Resolution', value: p.displaySize ?? '' },
+      { label: 'Battery', value: p.battery ?? '' },
+      { label: 'Cameras', value: cameras.join(', ') },
+      { label: 'Dimensions', value: p.dimentions ?? '' },
+      { label: 'Weight', value: p.weight ?? '' }
+    ];
+
+    return candidates.filter((row) => row.value !== '');
+  });
+}

src/app/features/product-detail/product-detail.html

@@ -0,0 +1,24 @@
+<section class="product-detail">
+  <a mat-button routerLink="/" class="product-detail__back">
+    <mat-icon>arrow_back</mat-icon>
+    Go back to the list
+  </a>
+
+  @if (loading()) {
+    <div class="product-detail__loading">
+      <mat-progress-spinner mode="indeterminate" diameter="48"></mat-progress-spinner>
+    </div>
+  } @else if (error()) {
+    <p class="product-detail__error">{{ error() }}</p>
+  } @else if (product(); as product) {
+    <div class="product-detail__columns">
+      <app-product-image [imgUrl]="product.imgUrl" [alt]="product.brand + ' ' + product.model" />
+
+      <div class="product-detail__info">
+        <h1>{{ product.brand }} {{ product.model }}</h1>
+        <app-product-description [product]="product" />
+        <app-product-actions [productId]="product.id" [options]="product.options" />
+      </div>
+    </div>
+  }
+</section>

src/app/features/product-detail/product-detail.scss

@@ -0,0 +1,34 @@
+.product-detail {
+  &__back {
+    margin-bottom: 1rem;
+  }
+
+  &__columns {
+    display: grid;
+    grid-template-columns: minmax(240px, 360px) 1fr;
+    gap: 2rem;
+  }
+
+  &__info {
+    h1 {
+      margin-top: 0;
+    }
+  }
+
+  &__loading {
+    display: flex;
+    justify-content: center;
+    padding: 3rem;
+  }
+
+  &__error {
+    text-align: center;
+    opacity: 0.7;
+  }
+
+  @media (max-width: 768px) {
+    &__columns {
+      grid-template-columns: 1fr;
+    }
+  }
+}

src/app/features/product-detail/product-detail.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductDetail } from './product-detail';
+
+describe('ProductDetail', () => {
+  let component: ProductDetail;
+  let fixture: ComponentFixture<ProductDetail>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductDetail]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProductDetail);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/product-detail/product-detail.ts

@@ -0,0 +1,70 @@
+import { Component, effect, inject, input, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+import { ProductService } from '../../core/services/product.service';
+import { ProductDetail as ProductDetailModel } from '../../core/models/product.model';
+import { ProductImage } from './product-image/product-image';
+import { ProductDescription } from './product-description/product-description';
+import { ProductActions } from './product-actions/product-actions';
+
+@Component({
+  selector: 'app-product-detail',
+  imports: [
+    RouterLink,
+    MatProgressSpinnerModule,
+    MatButtonModule,
+    MatIconModule,
+    ProductImage,
+    ProductDescription,
+    ProductActions
+  ],
+  templateUrl: './product-detail.html',
+  styleUrl: './product-detail.scss'
+})
+export class ProductDetail {
+  private readonly productService = inject(ProductService);
+
+  //product id
+  readonly id = input.required<string>();
+
+  // product detail
+  readonly product = signal<ProductDetailModel | null>(null);
+
+  readonly loading = signal(true);
+
+  readonly error = signal<string | null>(null);
+
+  constructor() {
+    effect((onCleanup) => {
+      const id = this.id();
+      let cancelled = false;
+      onCleanup(() => {
+        cancelled = true;
+      });
+      this.loadProduct(id, () => cancelled);
+    });
+  }
+
+  // Loads the product detail from the API and updates the signals accordingly.
+  private async loadProduct(id: string, isCancelled: () => boolean): Promise<void> {
+    this.loading.set(true);
+    this.error.set(null);
+    try {
+      const product = await this.productService.getProductDetail(id);
+      if (!isCancelled()) {
+        this.product.set(product);
+      }
+    } catch {
+      if (!isCancelled()) {
+        this.error.set('Not able to load de item detail.');
+      }
+    } finally {
+      if (!isCancelled()) {
+        this.loading.set(false);
+      }
+    }
+  }
+}

src/app/features/product-detail/product-image/product-image.html

@@ -0,0 +1 @@
+<img class="product-image" [src]="imgUrl()" [alt]="alt()" />

src/app/features/product-detail/product-image/product-image.scss

@@ -0,0 +1,8 @@
+.product-image {
+  display: block;
+  width: 100%;
+  max-width: 360px;
+  aspect-ratio: 1 / 1;
+  object-fit: contain;
+  margin: 0 auto;
+}

src/app/features/product-detail/product-image/product-image.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductImage } from './product-image';
+
+describe('ProductImage', () => {
+  let component: ProductImage;
+  let fixture: ComponentFixture<ProductImage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductImage]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProductImage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/product-detail/product-image/product-image.ts

@@ -0,0 +1,11 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-product-image',
+  templateUrl: './product-image.html',
+  styleUrl: './product-image.scss'
+})
+export class ProductImage {
+  readonly imgUrl = input.required<string>();
+  readonly alt = input.required<string>();
+}

src/app/features/product-list/product-item/product-item.html

@@ -0,0 +1,19 @@
+<mat-card
+  class="product-item"
+  tabindex="0"
+  role="button"
+  [attr.aria-label]="product().brand + ' ' + product().model"
+  (click)="onSelect()"
+  (keyup.enter)="onSelect()"
+>
+  <img
+    class="product-item__image"
+    [src]="product().imgUrl"
+    [alt]="product().brand + ' ' + product().model"
+  />
+  <mat-card-content>
+    <p class="product-item__brand">{{ product().brand }}</p>
+    <p class="product-item__model">{{ product().model }}</p>
+    <p class="product-item__price">{{ product().price }} &euro;</p>
+  </mat-card-content>
+</mat-card>

src/app/features/product-list/product-item/product-item.scss

@@ -0,0 +1,40 @@
+.product-item {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  cursor: pointer;
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+
+  &:hover,
+  &:focus-visible {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px);
+  }
+
+  &__image {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: contain;
+    box-sizing: border-box;
+    padding: 1rem;
+  }
+
+  &__brand {
+    margin: 0;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    opacity: 0.7;
+  }
+
+  &__model {
+    margin: 0.25rem 0;
+    font-weight: 600;
+  }
+
+  &__price {
+    margin: 0;
+    font-weight: 700;
+  }
+}

src/app/features/product-list/product-item/product-item.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductItem } from './product-item';
+
+describe('ProductItem', () => {
+  let component: ProductItem;
+  let fixture: ComponentFixture<ProductItem>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductItem]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProductItem);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/product-list/product-item/product-item.ts

@@ -0,0 +1,23 @@
+import { Component, input, output } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+
+import { Product } from '../../../core/models/product.model';
+
+// Item visor
+@Component({
+  selector: 'app-product-item',
+  imports: [MatCardModule],
+  templateUrl: './product-item.html',
+  styleUrl: './product-item.scss'
+})
+export class ProductItem {
+  // product to show in the card
+  readonly product = input.required<Product>();
+
+  // Event emited when product is selected.
+  readonly productSelected = output<Product>();
+
+  onSelect(): void {
+    this.productSelected.emit(this.product());
+  }
+}

src/app/features/product-list/product-list.html

@@ -0,0 +1,27 @@
+<section class="product-list">
+  <header class="product-list__toolbar">
+    <h1>Product list</h1>
+    <app-product-search (searchChange)="onSearchTermChange($event)"></app-product-search>
+  </header>
+
+  @if (loading()) {
+    <div class="product-list__loading">
+      <mat-progress-spinner mode="indeterminate" diameter="48"></mat-progress-spinner>
+    </div>
+  } @else if (error()) {
+    <p class="product-list__error">{{ error() }}</p>
+  } @else if (filteredProducts().length === 0) {
+    <p class="product-list__empty">No products found.</p>
+  } @else {
+    <div class="product-list__scroll" #scrollContainer (scroll)="onScroll($event)">
+      <div class="product-list__grid">
+        @for (product of visibleProducts(); track product.id) {
+          <app-product-item
+            [product]="product"
+            (productSelected)="onSelectProduct($event)"
+          ></app-product-item>
+        }
+      </div>
+    </div>
+  }
+</section>

src/app/features/product-list/product-list.scss

@@ -0,0 +1,72 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.product-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+
+  &__toolbar {
+    flex: 0 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+
+  &__scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  &__loading,
+  &__error,
+  &__empty {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__error,
+  &__empty {
+    text-align: center;
+    opacity: 0.7;
+  }
+
+  // max 4 elements
+  @media (max-width: 1024px) {
+    &__grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  @media (max-width: 768px) {
+    &__grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 480px) {
+    &__grid {
+      grid-template-columns: 1fr;
+    }
+  }
+}

src/app/features/product-list/product-list.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductList } from './product-list';
+
+describe('ProductList', () => {
+  let component: ProductList;
+  let fixture: ComponentFixture<ProductList>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductList]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProductList);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/product-list/product-list.ts

@@ -0,0 +1,124 @@
+import {
+  Component,
+  ElementRef,
+  afterRenderEffect,
+  computed,
+  inject,
+  signal,
+  viewChild, OnInit
+} from '@angular/core';
+
+import { Router } from '@angular/router';
+import {MatProgressSpinner, MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+
+import { ProductService } from '../../core/services/product.service';
+import { Product } from '../../core/models/product.model';
+import { ProductSearch } from './product-search/product-search';
+import { ProductItem } from './product-item/product-item';
+
+const PAGE_SIZE = 20;
+
+@Component({
+  selector: 'app-product-list',
+  imports: [
+    MatProgressSpinner,
+    ProductItem,
+    ProductSearch
+  ],
+  templateUrl: './product-list.html',
+  styleUrl: './product-list.scss',
+})
+export class ProductList implements OnInit {
+
+  private readonly productService = inject(ProductService);
+  private readonly router = inject(Router);
+
+  // Scroll list where items will be displayed
+  private readonly scrollContainer = viewChild<ElementRef<HTMLElement>>('scrollContainer');
+
+  // raw list of items retrieved by api call
+  private readonly allProducts = signal<Product[]>([]);
+
+  // search tearm on the search input
+  readonly searchTerm = signal('');
+
+  readonly loading = signal(true);
+
+  readonly error = signal<string | null>(null);
+
+  // products on the infinite scroll list that are currently visible
+  readonly visibleCount = signal(PAGE_SIZE);
+
+  //filtered products
+  readonly filteredProducts = computed(() => {
+    const term = this.searchTerm().trim().toLowerCase();
+    if (!term) {
+      return this.allProducts();
+    }
+    return this.allProducts().filter(
+      (product) =>
+        product.brand.toLowerCase().includes(term) || product.model.toLowerCase().includes(term)
+    );
+  });
+
+  // products that are currently visible on the list
+  readonly visibleProducts = computed(() => this.filteredProducts().slice(0, this.visibleCount()));
+
+  readonly hasMore = computed(() => this.visibleCount() < this.filteredProducts().length);
+
+  constructor() {
+    // small workaround to fix scroll heigh disaligned
+    afterRenderEffect(() => {
+      this.visibleProducts();
+      const el = this.scrollContainer()?.nativeElement;
+      if (el && this.hasMore() && el.scrollHeight <= el.clientHeight) {
+        this.loadMore();
+      }
+    });
+  }
+
+  ngOnInit() {
+    this.loadProducts();
+
+
+  }
+
+  onSearchTermChange(term: string): void {
+    this.searchTerm.set(term);
+    this.visibleCount.set(PAGE_SIZE);
+  }
+
+  // navigate to product detail page when users clic and item
+  onSelectProduct(product: Product): void {
+    this.router.navigate(['/product', product.id]);
+  }
+
+  // charge items when scroll is close to the end of the list and still pending items to show
+  onScroll(event: Event): void {
+    const el = event.target as HTMLElement;
+    const scrollThresholdPx = 200;
+    const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - scrollThresholdPx;
+    if (nearBottom && this.hasMore()) {
+      this.loadMore();
+    }
+  }
+
+  // load products from the api and set the allProducts signal
+  private async loadProducts(): Promise<void> {
+    try {
+      const products = await this.productService.getProducts();
+      this.allProducts.set(products);
+    } catch {
+      this.error.set('No se ha podido cargar el listado de productos.');
+    } finally {
+      this.loading.set(false);
+    }
+  }
+
+  // load more products to the visible list when user scrolls down
+  private loadMore(): void {
+    this.visibleCount.update((count) =>
+      Math.min(count + PAGE_SIZE, this.filteredProducts().length)
+    );
+  }
+}

src/app/features/product-list/product-search/product-search.html

@@ -0,0 +1,5 @@
+<mat-form-field appearance="outline" class="product-search" subscriptSizing="dynamic">
+  <mat-label>Find by brand or model</mat-label>
+  <input matInput type="text" (input)="onInput($event)" placeholder="Samsung, iPhone 12..." />
+  <mat-icon matSuffix>search</mat-icon>
+</mat-form-field>

src/app/features/product-list/product-search/product-search.scss

@@ -0,0 +1,4 @@
+.product-search {
+  width: 100%;
+  max-width: 320px;
+}

src/app/features/product-list/product-search/product-search.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductSearch } from './product-search';
+
+describe('ProductSearch', () => {
+  let component: ProductSearch;
+  let fixture: ComponentFixture<ProductSearch>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductSearch]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProductSearch);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/product-list/product-search/product-search.ts

@@ -0,0 +1,23 @@
+import { Component, output } from '@angular/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+
+//search bar
+@Component({
+  selector: 'app-product-search',
+  imports: [MatFormFieldModule, MatInputModule, MatIconModule],
+  templateUrl: './product-search.html',
+  styleUrl: './product-search.scss'
+})
+export class ProductSearch {
+
+  // Emits the search event
+  readonly searchChange = output<string>();
+
+  // Extracts the value from the input and emits it to the parent component
+  onInput(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.searchChange.emit(value);
+  }
+}