Product Catalog Cart - Copy this Angular, Css Component to your project

Import { Component, OnInit } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { NavbarComponent } from '../navbar/navbar.component'; import { CartComponent } from '../cart/cart.component'; interface Product { id: number; name: string; price: number; category: string; description: string; image: string; quantity?: number; } @Component({ selector: 'app product catalog', templateUrl: './products.component.html', standalone: true, imports: [CommonModule, FormsModule, NavbarComponent, CartComponent] }) export class ProductCatalogComponent implements OnInit { products: Product[] = [ { id: 1, name: "Smartphone X", price: 699, category: "Electronics", description: "Latest smartphone with advanced features", image: "https://images.unsplash.com/photo 1511707171634 5f897ff02aa9" }, { id: 2, name: "Organic Bananas", price: 4.99, category: "Groceries", description: "Fresh organic bananas from local farmers", image: "https://images.unsplash.com/photo 1481349518771 20055b2a7b24" }, { id: 3, name: "Denim Jacket", price: 89.99, category: "Clothes", description: "Classic denim jacket with modern fit", image: "https://images.unsplash.com/photo 1551028719 00167b16eac5" } ]; filteredProducts: Product[] = []; categories = ['Electronics', 'Groceries', 'Clothes']; selectedCategories: { [key: string]: boolean } = {}; priceRange = { min: 0, max: 1000 }; sortOption = 'default'; searchQuery = ''; loading = false; showModal = false; modalProduct: Product | null = null; cartItems: Product[] = []; showCart = false; ngOnInit() { this.categories.forEach(category => this.selectedCategories[category] = false); this.filteredProducts = [...this.products]; this.loadCart(); } applyFilters() { this.loading = true; setTimeout(() => { let filtered = [...this.products]; const selectedCategories = Object.entries(this.selectedCategories) .filter(([_, selected]) => selected) .map(([category]) => category); if (selectedCategories.length > 0) { filtered = filtered.filter(product => selectedCategories.includes(product.category)); } filtered = filtered.filter(product => product.price >= this.priceRange.min && product.price <= this.priceRange.max ); if (this.searchQuery) { const query = this.searchQuery.toLowerCase(); filtered = filtered.filter(product => product.name.toLowerCase().includes(query) || product.description.toLowerCase().includes(query) ); } switch (this.sortOption) { case 'priceLowToHigh': filtered.sort((a, b) => a.price b.price); break; case 'priceHighToLow': filtered.sort((a, b) => b.price a.price); break; } this.filteredProducts = filtered; this.loading = false; }, 300); } resetFilters() { this.categories.forEach(category => this.selectedCategories[category] = false); this.priceRange = { min: 0, max: 1000 }; this.sortOption = 'default'; this.searchQuery = ''; this.applyFilters(); } addToCart(product: Product) { const existing = this.cartItems.find(item => item.id === product.id); if (existing) { existing.quantity! += 1; } else { this.cartItems.push({ ...product, quantity: 1 }); } localStorage.setItem('cart', JSON.stringify(this.cartItems)); } loadCart() { const storedCart = localStorage.getItem('cart'); this.cartItems = storedCart ? JSON.parse(storedCart) : []; } toggleCart() { this.showCart = !this.showCart; } closeModal() { this.showModal = false; this.modalProduct = null; } }//this is my product component on clicking the cart it should show cart component thhis is my cart component import { Component, OnInit } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Component, OnInit } from '@angular/core'; interface Product { id: number; name: string; price: number; category: string; description: string; image: string; quantity: number; } @Component({ selector: 'app cart', templateUrl: './cart.component.html', standalone: true, imports: [CommonModule] }) export class CartComponent implements OnInit { cartItems: Product[] = []; totalAmount = 0; ngOnInit() { this.loadCart(); } loadCart() { const storedCart = localStorage.getItem('cart'); this.cartItems = storedCart ? JSON.parse(storedCart) : []; this.calculateTotal(); } updateQuantity(product: Product, change: number) { const item = this.cartItems.find(p => p.id === product.id); if (item) { item.quantity += change; if (item.quantity < 1) { this.removeItem(item.id); } else { this.saveCart(); } } } removeItem(id: number) { this.cartItems = this.cartItems.filter(p => p.id !== id); this.saveCart(); } saveCart() { localStorage.setItem('cart', JSON.stringify(this.cartItems)); this.calculateTotal(); } calculateTotal() { this.totalAmount = this.cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0); } }//on clickin the cart icon cart component has to load