Refactor code structure for improved readability and maintainability

src/app/app.config.ts

@@ -4,8 +4,5 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    provideBrowserGlobalErrorListeners(),
-    provideRouter(routes)
-  ]
+  providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
 };

src/app/app.routes.ts

@@ -1,4 +1,8 @@
 import { Routes } from '@angular/router';
 import { Productspage } from './productspage/productspage';
+import { Productconfigpage } from './productconfigpage/productconfigpage';
 
-export const routes: Routes = [{ path: '', component: Productspage }];
+export const routes: Routes = [
+  { path: '', component: Productspage },
+  { path: 'product/:id', component: Productconfigpage },
+];

src/app/productconfigpage/productconfigpage.html

@@ -1 +1,6 @@
-<p>productconfigpage works!</p>
+<div class="main">
+    <img [src]="product?.img" alt="" srcset="">
+    <sdx-numeric-stepper [label]="product?.name" sr-hint="Number of products" max="10"
+        oninput="console.log('Value:', arguments[0].target.value)">
+    </sdx-numeric-stepper>
+</div>

src/app/productconfigpage/productconfigpage.ts

@@ -1,11 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Products } from '../products.service';
 
 @Component({
   selector: 'app-productconfigpage',
   imports: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: './productconfigpage.html',
   styleUrl: './productconfigpage.scss',
 })
 export class Productconfigpage {
+  private selectedProduct = inject(ActivatedRoute);
+  productService = inject(Products);
 
+  productId = this.selectedProduct.snapshot.paramMap.get('id');
+  product = this.productService.getProductList().find((p) => p.id === Number(this.productId));
 }