variables globales de todos los productos, en product.service.ts solo para agregar productos en categorias y subcategorias, añadido buscador

src/app/app.component.ts

@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'calacloud';
+  title = 'AJsystem';
   //Sidebar toggle show hide function
   status = false;
   addToggle()
@@ -14,3 +14,4 @@ export class AppComponent {
     this.status = !this.status;       
   }
 }
+

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
+import { FormsModule } from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { IonicModule } from '@ionic/angular';
@@ -11,6 +11,7 @@ import { UPSComponent } from './ups/ups.component';
 import { BlogComponent } from './blog/blog.component';
 import { CelularesComponent } from './products/celulares/celulares.component';
 import { PortatilesComponent } from './products/portatiles/portatiles.component';
+import { ProductListComponent } from './components/product-list/product-list.component';
 
 @NgModule({
   declarations: [
@@ -21,12 +22,14 @@ import { PortatilesComponent } from './products/portatiles/portatiles.component'
     UPSComponent,
     BlogComponent,
     CelularesComponent,
-    PortatilesComponent
+    PortatilesComponent,
+    ProductListComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    IonicModule.forRoot()
+    IonicModule.forRoot(),
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/product-list/product-list.component.css

@@ -0,0 +1,26 @@
+.pagination {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.pagination button {
+  padding: 8px 16px;
+  border: none;
+  background-color: #eee;
+  color: #1a1a1a;
+  font-weight: bold;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background-color 0.3s ease;
+}
+
+.pagination button:hover {
+  background-color: #d0eaff;
+}
+
+.pagination button.active {
+  background-color: var(--AJsystem-blue);
+  color: white;
+}

src/app/components/product-list/product-list.component.html

@@ -0,0 +1,75 @@
+<section class="section food-menu" id="food-menu">
+  <div class="container">
+
+    <p class="section-subtitle">.</p>
+
+    <h2 class="h2 section-title">
+      Todo en {{ categoria }}  AJ<span class="cybersec">System</span>
+    </h2>
+
+    <p class="section-text">
+      Ven y conoce todo el mundo en tecnología de {{ categoria }}.
+    </p>
+
+
+    <ul class="food-menu-list">
+        <li *ngFor="let producto of paginatedProducts">
+        <!-- Card SVG como la que ya hicimos -->
+            <div class="food-menu-card">
+
+          <!-- Imagen con clipPath SVG -->
+            <div class="card-banner">
+                <svg class="w-100" width="300" viewBox="0 0 300 400"
+                 xmlns="http://www.w3.org/2000/svg"
+                 xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>{{ producto.nombre }} - {{ producto.descripcion }}</title>
+              <defs>
+                <clipPath id="rounded-rect">
+                  <rect x="0" y="0" width="300" height="400" rx="20" ry="20" />
+                </clipPath>
+              </defs>
+              <image 
+                width="300" 
+                height="400" 
+                [attr.xlink:href]="producto.imagen"
+                clip-path="url(#rounded-rect)"
+                preserveAspectRatio="xMidYMid slice" />
+            </svg>
+
+            <button class="btn food-menu-btn">Comprar</button>
+          </div>
+
+          <!-- Categoría y estrellas -->
+          <div class="wrapper">
+            <p class="category">Celulares</p>
+            <div class="rating-wrapper">
+              <ion-icon name="cloud" *ngFor="let star of [1,2,3,4,5]"></ion-icon>
+            </div>
+          </div>
+
+          <!-- Título -->
+          <h3 class="h3 card-title">{{ producto.nombre }} - {{ producto.descripcion }}</h3>
+
+          <!-- Precio -->
+          <div class="price-wrapper">
+            <p class="price-text">Valor:</p>
+            <data class="price">{{ producto.precio | currency:'COP' }}</data>
+            <del class="del">{{ (producto.precio * 1.25) | currency:'COP' }}</del>
+          </div>
+
+        </div>
+  </li>
+</ul>
+
+<!-- Paginación -->
+    <div class="pagination">
+      <button 
+        *ngFor="let page of [].constructor(totalPages); let i = index"
+        [ngClass]="{'active': currentPage === (i + 1)}"
+        (click)="setPage(i + 1)">
+        {{ i + 1 }}
+      </button>
+    </div>
+
+  </div>
+</section>

src/app/components/product-list/product-list.component.spec.ts

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

src/app/components/product-list/product-list.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-product-list',
+  templateUrl: './product-list.component.html',
+  styleUrls: ['./product-list.component.css']
+})
+export class ProductListComponent {
+
+  @Input() productos: any[] = [];
+  @Input() categoria: string = 'Productos';
+
+  currentPage = 1;
+  itemsPerPage = 15;
+
+  get paginatedProducts() {
+    const start = (this.currentPage - 1) * this.itemsPerPage;
+    return this.productos.slice(start, start + this.itemsPerPage);
+  }
+
+  get totalPages() {
+    return Math.ceil(this.productos.length / this.itemsPerPage);
+  }
+
+  setPage(page: number) {
+    this.currentPage = page;
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+}

src/app/home/home.component.html

@@ -31,9 +31,22 @@
             class="w-100 AJsystem-img">
         </figure>
  -->
+        
       </div>
     </section>
 
+    <input
+  type="text"
+  [(ngModel)]="searchTerm"
+  placeholder="Buscar producto..."
+/>
+<button (click)="buscar()">Buscar</button>
+
+<router-outlet></router-outlet>
+
+
+
+
   <!--
       - #ABOUT
     -->
@@ -414,4 +427,4 @@
 
   </article>
 </main>
-
+<router-outlet></router-outlet>

src/app/home/home.component.ts

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { ProductService } from 'src/app/services/product.service';
+
 
 @Component({
   selector: 'app-home',
@@ -6,5 +9,52 @@ import { Component } from '@angular/core';
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent {
+searchTerm = '';
+resultados: any[] = [];
+keywordRutas: { [key: string]: string } = {
+  'samsung': 'products/celulares',
+  'oppo': 'products/celulares',
+  'xiaomi': 'products/celulares',
+  'motorola': 'products/celulares',
+  'celular': 'products/celulares',
+  'celulares': 'products/celulares',
+
+  'tv': 'products/televisores',
+  'televisor': 'products/televisores',
+  'televisores': 'products/televisores',
+
+  'portatil': 'products/portatiles',
+  'portátiles': 'products/portatiles',
+  'notebook': 'products/portatiles',
+  'laptop': 'products/portatiles',
+};
+
+constructor(private productService: ProductService, private router: Router) {}
+
+buscar() {
+  const termino = this.searchTerm.trim().toLowerCase();
+
+  // Buscar coincidencia exacta
+  for (const keyword in this.keywordRutas) {
+    if (termino.includes(keyword)) {
+      const ruta = this.keywordRutas[keyword];
+      this.router.navigate([ruta]);
+      return;
+    }
+  }
+
+  // Si no encontró keyword, intentar buscar por productos
+  const resultados = this.productService.search(termino);
+
+  if (resultados.length === 1) {
+    const destino = resultados[0].categoria;
+    this.router.navigate([`products/${destino}`]);
+  } else if (resultados.length > 1) {
+    this.router.navigate(['/resultados'], { queryParams: { q: this.searchTerm } });
+  } else {
+    alert('No se encontraron resultados.');
+  }
+}
+
 
 }

src/app/products/celulares/celulares.component.css

@@ -1,26 +0,0 @@
-.pagination {
-  display: flex;
-  justify-content: center;
-  gap: 10px;
-  margin-top: 20px;
-}
-
-.pagination button {
-  padding: 8px 16px;
-  border: none;
-  background-color: #eee;
-  color: #1a1a1a;
-  font-weight: bold;
-  cursor: pointer;
-  border-radius: 6px;
-  transition: background-color 0.3s ease;
-}
-
-.pagination button:hover {
-  background-color: #d0eaff;
-}
-
-.pagination button.active {
-  background-color: var(--AJsystem-blue);
-  color: white;
-}

src/app/products/celulares/celulares.component.html

@@ -1,73 +1,4 @@
-<section class="section food-menu" id="food-menu">
+<app-product-list 
-  <div class="container">
+  [productos]="productosCelulares" 
-
+  categoria="Celulares">
-    <p class="section-subtitle">.</p>
+</app-product-list>
-
-    <h2 class="h2 section-title">
-      Todo en celulares AJ<span class="cybersec">System</span>
-    </h2>
-
-    <p class="section-text">
-      Ven y conoce todo el mundo en tecnología de celulares.
-    </p>
-
-    <ul class="food-menu-list">
-      <li *ngFor="let producto of paginatedProducts">
-        <div class="food-menu-card">
-
-          <!-- Imagen con clipPath SVG -->
-          <div class="card-banner">
-            <svg class="w-100" width="300" viewBox="0 0 300 400"
-                 xmlns="http://www.w3.org/2000/svg"
-                 xmlns:xlink="http://www.w3.org/1999/xlink">
-              <title>{{ producto.nombre }} - {{ producto.descripcion }}</title>
-              <defs>
-                <clipPath id="rounded-rect">
-                  <rect x="0" y="0" width="300" height="400" rx="20" ry="20" />
-                </clipPath>
-              </defs>
-              <image 
-                width="300" 
-                height="400" 
-                [attr.xlink:href]="producto.imagen"
-                clip-path="url(#rounded-rect)"
-                preserveAspectRatio="xMidYMid slice" />
-            </svg>
-
-            <button class="btn food-menu-btn">Comprar</button>
-          </div>
-
-          <!-- Categoría y estrellas -->
-          <div class="wrapper">
-            <p class="category">Celulares</p>
-            <div class="rating-wrapper">
-              <ion-icon name="star" *ngFor="let star of [1,2,3,4,5]"></ion-icon>
-            </div>
-          </div>
-
-          <!-- Título -->
-          <h3 class="h3 card-title">{{ producto.nombre }} - {{ producto.descripcion }}</h3>
-
-          <!-- Precio -->
-          <div class="price-wrapper">
-            <p class="price-text">Valor:</p>
-            <data class="price">{{ producto.precio | currency:'COP' }}</data>
-            <del class="del">{{ (producto.precio * 1.25) | currency:'COP' }}</del>
-          </div>
-
-        </div>
-      </li>
-    </ul>
-
-    <!-- Paginación -->
-    <div class="pagination">
-      <button 
-        *ngFor="let page of [].constructor(totalPages); let i = index"
-        [ngClass]="{'active': currentPage === (i + 1)}"
-        (click)="setPage(i + 1)">
-        {{ i + 1 }}
-      </button>
-    </div>
-
-  </div>
-</section>

src/app/products/celulares/celulares.component.ts

@@ -1,4 +1,6 @@
+/*celulares.component.ts*/
 import { Component } from '@angular/core';
+import { ProductService } from 'src/app/services/product.service';
 
 @Component({
   selector: 'app-celulares',
@@ -6,213 +8,16 @@ import { Component } from '@angular/core';
   styleUrls: ['./celulares.component.css']
 })
 export class CelularesComponent {
-  // Tu lista completa de productos (puedes cargarla desde un servicio o API si lo deseas)
+  productosCelulares: any[] = [];
-  productos = [
-  {
-    codigo: '7CO05',
-    nombre: 'OPPO A20',
-    descripcion: 'PANTALLA 6,67" - OCTA CORE 2,2GHZ / 1,8GHZ - 128GB - MEM 4GB (+4GB EXPANDIBLE) - DOBLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - OCEAN BLUE',
-    precio: 419000,
-    imagen: 'assets/images/celulares/OPPOA20-OCEAN BLUE.webp'
-  },
-  {
-    codigo: '7CO06',
-    nombre: 'OPPO A20',
-    descripcion: 'PANTALLA 6,67" - OCTA CORE 2,2GHZ / 1,8GHZ - 128GB - MEM 4GB (+4GB EXPANDIBLE) - DOBLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - CAFE',
-    precio: 419000,
-    imagen: 'assets/images/celulares/OPPOA20CAFE.webp'
-  },
-  {
-    codigo: '7CS205',
-    nombre: 'SAMSUNG A05',
-    descripcion: 'PANTALLA 6,6" - OCTA CORE 2,0GHZ / 1,8GHZ - 128GB - MEM 4GB - DOBLE CAMARA - ANDROID 13 - DUAL SIM - 4G LTE - NEGRO',
-    precio: 380000,
-    imagen: 'assets/images/celulares/SAMSUNGA05NEGRO.jpg'
-  },
-  {
-    codigo: '7CS222',
-    nombre: 'SAMSUNG A06',
-    descripcion: 'PANTALLA 6,7" - OCTA CORE 2,0GHZ / 1,8GHZ - 128GB - MEM 4GB - DOBLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - VERDE',
-    precio: 390000,
-    imagen: 'assets/images/celulares/Samsung-A06-verde.webp'
-  },
-  {
-    codigo: '7CS224',
-    nombre: 'SAMSUNG A06',
-    descripcion: 'PANTALLA 6,7" - OCTA CORE 2,0GHZ / 1,8GHZ - 128GB - MEM 4GB - DOBLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - AZUL',
-    precio: 390000,
-    imagen: 'assets/images/celulares/CelularSAMSUNGA06AZUL.webp'
-  },
-  {
-    codigo: '7CS221',
-    nombre: 'SAMSUNG A05S',
-    descripcion: 'PANTALLA 6,6" - OCTA CORE 2,4GHZ / 1,9GHZ - 128GB - MEM 6GB - TRIPLE CAMARA - ANDROID 13 - DUAL SIM - 4G LTE - NEGRO',
-    precio: 463000,
-    imagen: 'assets/images/celulares/SAMSUNGA05SNEGRO.jpg'
-  },
-  {
-    codigo: '7CS223',
-    nombre: 'SAMSUNG A05S',
-    descripcion: 'PANTALLA 6,6" - OCTA CORE 2,4GHZ / 1,9GHZ - 128GB - MEM 6GB - TRIPLE CAMARA - ANDROID 13 - DUAL SIM - 4G LTE - GRIS',
-    precio: 463000,
-    imagen: 'assets/images/celulares/SAMSUNGA05SGRIS.jpg'
-  },
-  {
-    codigo: '7CS225',
-    nombre: 'SAMSUNG A16',
-    descripcion: 'PANTALLA 6,7" - OCTA CORE 2,4GHZ / 2,0GHZ - 256GB - MEM 8GB - TRIPLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - LIGHT GRAY',
-    precio: 710000,
-    imagen: 'assets/images/celulares/SAMSUNG A16 LIGHT GRAY.webp'
-  },
-  {
-    codigo: '7CS226',
-    nombre: 'SAMSUNG A16',
-    descripcion: 'PANTALLA 6,7" - OCTA CORE 2,4GHZ / 2,0GHZ - 256GB - MEM 8GB - TRIPLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - BLUE BLACK',
-    precio: 710000,
-    imagen: 'assets/images/celulares/SAMSUNGA16BLUEBLACK.jpg'
-  },
-  {
-    codigo: '7CS227',
-    nombre: 'SAMSUNG A16',
-    descripcion: 'PANTALLA 6,7" - OCTA CORE 2,4GHZ / 2,0GHZ - 256GB - MEM 8GB - TRIPLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - LIGHT GREEN',
-    precio: 710000,
-    imagen: 'assets/images/celulares/SAMSUNGA16LIGHT GREEN.jpg'
-  },
-  {
-    codigo: '7CX123',
-    nombre: 'XIAOMI REDMI A3X',
-    descripcion: 'PANTALLA 6,71" - OCTA CORE (1,8GHZ / 1,2GHZ)- 64GB - MEMORIA 3GB - DOBLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - MIDNIGHT BLACK',
-    precio: 270000,
-    imagen: 'assets/images/celulares/XIAOMIREDMIA3XMIDNIGHT BLACK.webp'
-  },
-  {
-    codigo: '7CX124',
-    nombre: 'XIAOMI REDMI A3X',
-    descripcion: 'PANTALLA 6,71" - OCTA CORE (1,8GHZ / 1,2GHZ)- 64GB - MEMORIA 3GB - DOBLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - AURORA GREEN',
-    precio: 270000,
-    imagen: 'assets/images/celulares/XIAOMIREDMIA3XAURORA GREEN.webp'
-  },
-  {
-    codigo: '7CX125',
-    nombre: 'XIAOMI REDMI A5',
-    descripcion: 'PANTALLA 6,88" - OCTA CORE (1,8GHZ / 1,6GHZ)- 128GB - MEMORIA 4GB - DOBLE CAMARA - ANDROID 15 - DUAL SIM - 4G LTE - MIDNIGHT BLACK',
-    precio: 335000,
-    imagen: 'assets/images/celulares/XIAOMIREDMIA5BLACK.webp'
-  },
-  {
-    codigo: '7CX111',
-    nombre: 'XIAOMI REDMI 14C',
-    descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 128GB - MEMORIA 4GB - DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE -STARRY BLUE',
-    precio: 400000,
-    imagen: 'assets/images/celulares/XIAOMIREDMI14CstarryBLUE.webp'
-  },
-  {
-    codigo: '7CX112',
-    nombre: 'XIAOMI REDMI 14C',
-    descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 128GB - MEMORIA 4GB - DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE -SEA GREEN',
-    precio: 400000,
-    imagen: 'assets/images/celulares/XIAOMIREDMI14CSEAGREEN.webp'
-  },
-  
-  {
-    codigo: '7CX113',
-    nombre: 'XIAOMI REDMI 14C',
-    descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 128GB - MEMORIA 4GB - DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE - MIDN BLACK',
-    precio: 400000,
-    imagen: 'assets/images/celulares/XIAOMIREDMI14CMIDNBLACK.webp'
-  },
-  {
-    codigo: '7CX51',
-    nombre: 'XIAOMI REDMI NOTE 11',
-    descripcion: 'PANTALLA 6,4" -OCTA CORE (2,4GHZ / 1,9GHZ) - 128GB - MEMORIA 4GB - CUATRO CAMARAS - ANDROID 11 - DUAL SIM - 4G LTE - BLUE',
-    precio: 499000,
-    imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 11.webp'
-  },
-  {
-    codigo: '7CX114',
-    nombre: 'XIAOMI REDMI 14C',
-    descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 256GB - MEMORIA 8GB - DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE -SEA GREEN',
-    precio: 499000,
-    imagen: 'assets/images/celulares/XIAOMIREDMI14CSEAGREEN.webp'
-  },
-  {
-    codigo: '7CX115',
-    nombre: 'XIAOMI REDMI 14C',
-    descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 256GB - MEMORIA 8GB -DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE - STARRY BLUE',
-    precio: 499000,
-    imagen: 'assets/images/celulares/XIAOMIREDMI14CSTARRY BLUE.webp'
-  },
-  {
-    codigo: '7CX116',
-    nombre: 'XIAOMI REDMI 14C',
-    descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 256GB - MEMORIA 8GB -DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE - MIDN BLACK',
-    precio: 499000,
-    imagen: 'assets/images/celulares/XIAOMIREDMIA3XMIDNIGHT BLACK.webp'
-  },
-  {
-    codigo: '7CX120',
-    nombre: 'XIAOMI REDMI NOTE 14',
-    descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM -ANDROID 14 - DUAL SIM - 4G LTE - MIDNIGHT BLACK',
-    precio: 710000,
-    imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 minghblack.webp'
-  },
-  {
-    codigo: '7CX121',
-    nombre: 'XIAOMI REDMI NOTE 14',
-    descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM -ANDROID 14 - DUAL SIM - 4G LTE - OCEAN BLUE',
-    precio: 710000,
-    imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 OCEAN BLUE$.webp'
-  },
-  {
-    codigo: '7CX122',
-    nombre: 'XIAOMI REDMI NOTE 14',
-    descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM -ANDROID 14 - DUAL SIM - 4G LTE - LIME GREEN',
-    precio: 710000,
-    imagen: 'assets/images/celulares/Celular XIAOMI REDMI NOTE 14 LIME GREEN.webp'
-  },
-  {
-    codigo: '7CX117',
-    nombre: 'XIAOMI REDMI NOTE 14 PRO',
-    descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - OCEAN BLUE',
-    precio: 999000,
-    imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 PROOCEAN BLUE$.webp'
-  },
-  {
-    codigo: '7CX118',
-    nombre: 'XIAOMI REDMI NOTE 14 PRO',
-    descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - AURORA P',
-    precio: 999000,
-    imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 PRO AURORA P.jpg'
-  },
-  {
-    codigo: '7CX119',
-    nombre: 'XIAOMI REDMI NOTE 14 PRO',
-    descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - MID BLACK',
-    precio: 999000,
-    imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 PROminghblack.webp'
-  }
 
-    /* Aquí va tu arreglo con todos los productos. Por ejemplo:
+  constructor(private productService: ProductService) {}
-    { nombre: 'Celular A', precio: 123, imagen: '...' },
-    { nombre: 'Celular B', precio: 456, imagen: '...' },
-    ... hasta todos los que tengas
-    */
-  ];
 
-  currentPage = 1;
+  ngOnInit(): void {
-  itemsPerPage = 15;
+    /*Para subcategorias usar*/
-
+    /*this.productosCelulares = this.productService.getProductosPorCategoria('celulares', 'oppo');*/
-  get paginatedProducts() {
+    /*this.productosCelulares = this.productService.getProductosPorCategoria('celulares', 'samsung');*/
-    const start = (this.currentPage - 1) * this.itemsPerPage;
+    /*this.productosCelulares = this.productService.getProductosPorCategoria('celulares', 'xiaomi');*/
-    return this.productos.slice(start, start + this.itemsPerPage);
+    /*Para categorias usar*/
-  }
+    this.productosCelulares = this.productService.getProductosPorCategoria('celulares');
-
-  get totalPages() {
-    return Math.ceil(this.productos.length / this.itemsPerPage);
-  }
-
-  setPage(page: number) {
-    this.currentPage = page;
-    window.scrollTo({ top: 0, behavior: 'smooth' }); // Opcional: subir al principio
   }
 }

src/app/services/product.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProductService } from './product.service';
+
+describe('ProductService', () => {
+  let service: ProductService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ProductService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/product.service.ts

@@ -0,0 +1,290 @@
+/*product.service.ts*/
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class ProductService {
+
+  private productos: {
+    celulares: { [marca: string]: any[] },
+    televisores: any[],
+    computadores: any[],
+    portatiles: any[]
+  } = {
+    celulares: {
+      oppo: [
+        {
+        codigo: '7CO05',
+        nombre: 'OPPO A20',
+        descripcion: 'PANTALLA 6,67" - OCTA CORE 2,2GHZ / 1,8GHZ - 128GB - MEM 4GB (+4GB EXPANDIBLE) - DOBLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - OCEAN BLUE',
+        precio: 419000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/OPPOA20-OCEAN BLUE.webp'
+        },
+        {
+        codigo: '7CO06',
+        nombre: 'OPPO A20',
+        descripcion: 'PANTALLA 6,67" - OCTA CORE 2,2GHZ / 1,8GHZ - 128GB - MEM 4GB (+4GB EXPANDIBLE) - DOBLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - CAFE',
+        precio: 419000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/OPPOA20CAFE.webp'
+        },
+      ],
+      samsung: [
+      {
+        codigo: '7CS205',
+        nombre: 'SAMSUNG A05',
+        descripcion: 'PANTALLA 6,6" - OCTA CORE 2,0GHZ / 1,8GHZ - 128GB - MEM 4GB - DOBLE CAMARA - ANDROID 13 - DUAL SIM - 4G LTE - NEGRO',
+        precio: 380000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/SAMSUNGA05NEGRO.jpg'
+      },
+      {
+        codigo: '7CS222',
+        nombre: 'SAMSUNG A06',
+        descripcion: 'PANTALLA 6,7" - OCTA CORE 2,0GHZ / 1,8GHZ - 128GB - MEM 4GB - DOBLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - VERDE',
+        precio: 390000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/Samsung-A06-verde.webp'
+      },
+      {
+        codigo: '7CS224',
+        nombre: 'SAMSUNG A06',
+        descripcion: 'PANTALLA 6,7" - OCTA CORE 2,0GHZ / 1,8GHZ - 128GB - MEM 4GB - DOBLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - AZUL',
+        precio: 390000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/CelularSAMSUNGA06AZUL.webp'
+      },
+      {
+        codigo: '7CS221',
+        nombre: 'SAMSUNG A05S',
+        descripcion: 'PANTALLA 6,6" - OCTA CORE 2,4GHZ / 1,9GHZ - 128GB - MEM 6GB - TRIPLE CAMARA - ANDROID 13 - DUAL SIM - 4G LTE - NEGRO',
+        precio: 463000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/SAMSUNGA05SNEGRO.jpg'
+      },
+      {
+        codigo: '7CS223',
+        nombre: 'SAMSUNG A05S',
+        descripcion: 'PANTALLA 6,6" - OCTA CORE 2,4GHZ / 1,9GHZ - 128GB - MEM 6GB - TRIPLE CAMARA - ANDROID 13 - DUAL SIM - 4G LTE - GRIS',
+        precio: 463000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/SAMSUNGA05SGRIS.jpg'
+      },
+      {
+        codigo: '7CS225',
+        nombre: 'SAMSUNG A16',
+        descripcion: 'PANTALLA 6,7" - OCTA CORE 2,4GHZ / 2,0GHZ - 256GB - MEM 8GB - TRIPLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - LIGHT GRAY',
+        precio: 710000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/SAMSUNG A16 LIGHT GRAY.webp'
+      },
+      {
+        codigo: '7CS226',
+        nombre: 'SAMSUNG A16',
+        descripcion: 'PANTALLA 6,7" - OCTA CORE 2,4GHZ / 2,0GHZ - 256GB - MEM 8GB - TRIPLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - BLUE BLACK',
+        precio: 710000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/SAMSUNGA16BLUEBLACK.jpg'
+      },
+      {
+        codigo: '7CS227',
+        nombre: 'SAMSUNG A16',
+        descripcion: 'PANTALLA 6,7" - OCTA CORE 2,4GHZ / 2,0GHZ - 256GB - MEM 8GB - TRIPLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - LIGHT GREEN',
+        precio: 710000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/SAMSUNGA16LIGHT GREEN.jpg'
+      },
+
+      ],
+      xiaomi: [
+      {
+        codigo: '7CX123',
+        nombre: 'XIAOMI REDMI A3X',
+        descripcion: 'PANTALLA 6,71" - OCTA CORE (1,8GHZ / 1,2GHZ)- 64GB - MEMORIA 3GB - DOBLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - MIDNIGHT BLACK',
+        precio: 270000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMIREDMIA3XMIDNIGHT BLACK.webp'
+      },
+      {
+        codigo: '7CX124',
+        nombre: 'XIAOMI REDMI A3X',
+        descripcion: 'PANTALLA 6,71" - OCTA CORE (1,8GHZ / 1,2GHZ)- 64GB - MEMORIA 3GB - DOBLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - AURORA GREEN',
+        precio: 270000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMIREDMIA3XAURORA GREEN.webp'
+      },
+      {
+        codigo: '7CX125',
+        nombre: 'XIAOMI REDMI A5',
+        descripcion: 'PANTALLA 6,88" - OCTA CORE (1,8GHZ / 1,6GHZ)- 128GB - MEMORIA 4GB - DOBLE CAMARA - ANDROID 15 - DUAL SIM - 4G LTE - MIDNIGHT BLACK',
+        precio: 335000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMIREDMIA5BLACK.webp'
+      },
+      {
+        codigo: '7CX111',
+        nombre: 'XIAOMI REDMI 14C',
+        descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 128GB - MEMORIA 4GB - DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE -STARRY BLUE',
+        precio: 400000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMIREDMI14CstarryBLUE.webp'
+      },
+      {
+        codigo: '7CX112',
+        nombre: 'XIAOMI REDMI 14C',
+        descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 128GB - MEMORIA 4GB - DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE -SEA GREEN',
+        precio: 400000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMIREDMI14CSEAGREEN.webp'
+      },
+      
+      {
+        codigo: '7CX113',
+        nombre: 'XIAOMI REDMI 14C',
+        descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 128GB - MEMORIA 4GB - DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE - MIDN BLACK',
+        precio: 400000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMIREDMI14CMIDNBLACK.webp'
+      },
+      {
+        codigo: '7CX51',
+        nombre: 'XIAOMI REDMI NOTE 11',
+        descripcion: 'PANTALLA 6,4" -OCTA CORE (2,4GHZ / 1,9GHZ) - 128GB - MEMORIA 4GB - CUATRO CAMARAS - ANDROID 11 - DUAL SIM - 4G LTE - BLUE',
+        precio: 499000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 11.webp'
+      },
+      {
+        codigo: '7CX114',
+        nombre: 'XIAOMI REDMI 14C',
+        descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 256GB - MEMORIA 8GB - DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE -SEA GREEN',
+        precio: 499000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMIREDMI14CSEAGREEN.webp'
+      },
+      {
+        codigo: '7CX115',
+        nombre: 'XIAOMI REDMI 14C',
+        descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 256GB - MEMORIA 8GB -DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE - STARRY BLUE',
+        precio: 499000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMIREDMI14CSTARRY BLUE.webp'
+      },
+      {
+        codigo: '7CX116',
+        nombre: 'XIAOMI REDMI 14C',
+        descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 256GB - MEMORIA 8GB -DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE - MIDN BLACK',
+        precio: 499000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMIREDMIA3XMIDNIGHT BLACK.webp'
+      },
+      {
+        codigo: '7CX120',
+        nombre: 'XIAOMI REDMI NOTE 14',
+        descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM -ANDROID 14 - DUAL SIM - 4G LTE - MIDNIGHT BLACK',
+        precio: 710000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 minghblack.webp'
+      },
+      {
+        codigo: '7CX121',
+        nombre: 'XIAOMI REDMI NOTE 14',
+        descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM -ANDROID 14 - DUAL SIM - 4G LTE - OCEAN BLUE',
+        precio: 710000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 OCEAN BLUE$.webp'
+      },
+      {
+        codigo: '7CX122',
+        nombre: 'XIAOMI REDMI NOTE 14',
+        descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM -ANDROID 14 - DUAL SIM - 4G LTE - LIME GREEN',
+        precio: 710000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/Celular XIAOMI REDMI NOTE 14 LIME GREEN.webp'
+      },
+      {
+        codigo: '7CX117',
+        nombre: 'XIAOMI REDMI NOTE 14 PRO',
+        descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - OCEAN BLUE',
+        precio: 999000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 PROOCEAN BLUE$.webp'
+      },
+      {
+        codigo: '7CX118',
+        nombre: 'XIAOMI REDMI NOTE 14 PRO',
+        descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - AURORA P',
+        precio: 999000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 PRO AURORA P.jpg'
+      },
+      {
+        codigo: '7CX119',
+        nombre: 'XIAOMI REDMI NOTE 14 PRO',
+        descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - MID BLACK',
+        precio: 999000,
+        categoria: 'celulares',
+        imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 PROminghblack.webp'
+      }
+      ]
+   
+  
+  
+    /* Aquí va tu arreglo con todos los productos. Por ejemplo:
+    { nombre: 'Celular A', precio: 123, imagen: '...' },
+    { nombre: 'Celular B', precio: 456, imagen: '...' },
+    ... hasta todos los que tengas
+    */
+  },
+   televisores: [
+    {
+
+    }
+   ],
+   computadores: [
+    {
+
+    }
+   ],
+   portatiles: [
+    {
+
+    }
+   ],
+  };
+
+  getProductosPorCategoria(categoria: string, subcategoria?: string): any[] {
+  if (categoria === 'celulares') {
+    if (subcategoria) {
+      return this.productos.celulares[subcategoria] || [];
+    } else {
+      return Object.values(this.productos.celulares).flat();
+    }
+  }
+
+  const result = this.productos[categoria as keyof typeof this.productos];
+  return Array.isArray(result) ? result : [];
+}
+
+
+getTodos(): any[] {
+  return [
+    ...Object.values(this.productos.celulares).flat(),
+    ...this.productos.portatiles,
+    ...this.productos.televisores,
+    ...this.productos.computadores
+  ];
+}
+
+
+  search(term: string): any[] {
+  term = term.toLowerCase();
+  return this.getTodos().filter(p =>
+    p.nombre.toLowerCase().includes(term) ||
+    p.descripcion.toLowerCase().includes(term) ||
+    p.categoria.toLowerCase().includes(term)
+  );
+}
+
+}
+