https://github.com/hvlikk/product-catalog
Prosty katalog produktów zbudowany w Angularze.
https://github.com/hvlikk/product-catalog
angular type-script
Last synced: 10 months ago
JSON representation
Prosty katalog produktów zbudowany w Angularze.
- Host: GitHub
- URL: https://github.com/hvlikk/product-catalog
- Owner: Hvlikk
- Created: 2025-04-26T16:19:50.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-05-01T22:35:03.000Z (about 1 year ago)
- Last Synced: 2025-06-12T01:41:15.758Z (12 months ago)
- Topics: angular, type-script
- Language: TypeScript
- Homepage:
- Size: 1.11 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📦 **Product Catalog App (Angular) - in development**
A simple product catalog application built with Angular, demonstrating key features such as data binding, component communication, routing, API integration, and form handling.
### 🎯 **Project Overview**
This project allows users to view, add, and delete products in a catalog. The app uses Angular's powerful features like components, services, HTTP requests, and form handling to create a dynamic and functional web application.
### 🔧 **Technologies Used**
- **Angular** (Latest Version)
- **TypeScript**
- **SCSS** for styling
- **RxJS** for handling asynchronous operations
### ⚙️ **Key Features**
- **Product List**: Dynamically rendered list of products using `*ngFor` directive.
- **Add Product**: Form-based product creation using template-driven forms with validation.
- **Delete Product**: Event-driven product removal from the list using `@Output` and `EventEmitter`.
- **Product Details**: View detailed information about each product via routing (`routerLink`, `ActivatedRoute`).
- **HTTP Requests**: Fetch products from an API using `HttpClient` (`GET`, `POST`).
- **Form Validation**: Template-driven and reactive forms with validation (required, minlength).
- **Error Handling**: Display loading states and handle HTTP request errors.
### 🛠 **Features in Detail**
- **Component Communication**: Use of `@Input` to pass data between components and `@Output` to emit events from child to parent components.
- **Routing & Navigation**: Simple routing with dynamic product detail pages, including a 404 redirect.
- **Services & Dependency Injection**: `ProductService` to manage products in the app, with methods for retrieving, adding, and deleting products.
- **API Integration**: Data is fetched from the JSONPlaceholder API (or you can replace it with a real API for production).
- **Form Handling**: Template-driven forms for creating new products and reactive forms for future scalability.
### 🚀 **How to Run the Project Locally**
1. **Clone the repository:**
```bash
git clone https://github.com/yourusername/product-catalog-app.git
2. Install dependencies:
```bash
cd product-catalog-app
npm install
Run the app:
```
3. Run the app:
```bash
ng serve
Open your browser and navigate to: http://localhost:4200/.
```
4. Open your browser and navigate to: http://localhost:4200/.