End of section 10

Author: onur-ozguzel

client/src/app/app.component.html

@@ -1,5 +1,5 @@
 <app-header></app-header>
 
 <div class="container mt-6">
-    <app-shop></app-shop>
+    <router-outlet></router-outlet>
 </div>

client/src/app/app.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from "./layout/header/header.component";
-import { ShopComponent } from "./features/shop/shop.component";
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, HeaderComponent, ShopComponent],
+  imports: [RouterOutlet, HeaderComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

client/src/app/app.routes.ts

@@ -1,3 +1,11 @@
 import { Routes } from '@angular/router';
+import { HomeComponent } from './features/home/home.component';
+import { ShopComponent } from './features/shop/shop.component';
+import { ProductDetailsComponent } from './features/shop/product-details/product-details.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    { path: '', component: HomeComponent },
+    { path: 'shop', component: ShopComponent },
+    { path: 'shop/:id', component: ProductDetailsComponent },
+    { path: '**', redirectTo: '', pathMatch: 'full' }
+];

client/src/app/core/services/shop.service.ts

@@ -38,6 +38,10 @@ export class ShopService {
     return this.http.get<Pagination<Product>>(this.baseUrl + 'products', { params })
   }
 
+  getProduct(id: number) {
+    return this.http.get<Product>(this.baseUrl + 'products/' + id);
+  }
+
   getBrands() {
     if (this.brands.length > 0) return;
 

client/src/app/features/home/home.component.html

@@ -0,0 +1 @@
+<p>home works!</p>

client/src/app/features/home/home.component.scss

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  imports: [],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.scss'
+})
+export class HomeComponent {
+
+}

client/src/app/features/home/home.component.ts

@@ -0,0 +1,38 @@
+@if (product) {
+    <section class="py-8">
+        <div class="max-w-7xl px-4 mx-auto">
+            <div class="grid grid-cols-2 gap-8">
+                <div class="max-w-7xl mx-auto">
+                    <img class="w-full" src="{{product.pictureUrl}}" alt="product image">
+                </div>
+
+                <div>
+                    <h1 class="text-2xl font-semibold text-gray-900">{{product.name}}</h1>
+                    <div class="mt-4 items-center gap-4 flex">
+                        <p class="text-3xl font-extrabold text-gray-900">
+                            {{product.price | currency}}
+                        </p>
+                    </div>
+
+                    <div class="flex gap-4 mt-6">
+                        <button mat-flat-button class="match-input-height">
+                            <mat-icon>shopping_cart</mat-icon>
+                            Add to cart
+                        </button>
+
+                        <mat-form-field appearance="outline" class="flex">
+                            <mat-label>Quantity</mat-label>
+                            <input matInput type="number">
+                        </mat-form-field>
+                    </div>
+
+                    <mat-divider></mat-divider>
+
+                    <p class="mt-6 text-gray-500">
+                        {{product.description}}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+}

client/src/app/features/shop/product-details/product-details.component.html

@@ -0,0 +1,44 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { ShopService } from '../../../core/services/shop.service';
+import { ActivatedRoute } from '@angular/router';
+import { Product } from '../../../shared/models/product';
+import { CurrencyPipe } from '@angular/common';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatDivider } from '@angular/material/divider';
+
+@Component({
+  selector: 'app-product-details',
+  imports: [
+    CurrencyPipe,
+    MatButton,
+    MatIcon,
+    MatFormField,
+    MatInput,
+    MatLabel,
+    MatDivider
+  ],
+  templateUrl: './product-details.component.html',
+  styleUrl: './product-details.component.scss'
+})
+export class ProductDetailsComponent implements OnInit {
+  private shopService = inject(ShopService);
+  private activatedRoute = inject(ActivatedRoute);
+  product?: Product;
+
+  ngOnInit(): void {
+    this.loadProduct();
+  }
+
+  loadProduct() {
+    const id = this.activatedRoute.snapshot.paramMap.get('id');
+    if (!id) return;
+
+    this.shopService.getProduct(+id).subscribe({
+      next: product => this.product = product,
+      error: error => console.log(error)
+    })
+  }
+}