Activity 31: Angular Ecommerce Product List

This documentation provides a comprehensive overview of an Angular ProductComponent, a standalone component designed for e-commerce applications. It includes functionality to add products to the cart and wishlist.

Component Decorator

import { Component, inject, OnInit } from '@angular/core';
import { Product } from '../product.model';
import { ProductService } from '../product.service';
import { NgForOf } from '@angular/common';

@Component({
    selector: 'app-product',
    standalone: true,
    imports: [NgForOf],
    templateUrl: './product.component.html',
    styleUrl: './product.component.css',
})
export class ProductComponent implements OnInit {
    private readonly productService = inject(ProductService);
    products: Product[] = [];

    ngOnInit(): void {
        this.productService.getProducts().subscribe((products: Product[]) => {
            this.products = products;
        });
    }

    addToCart() {
        alert('The product has been added to the cart!');
    }

    addToWishlist() {
        alert('The product has been added to the wishlist!');
    }
}

• Imports:

  • Component, inject, OnInit from Angular core.

  • Product model.

  • ProductService.

  • NgForOf for rendering lists.

• Decorator Configuration:

    @Component({
        selector: 'app-product',
        standalone: true,
        imports: [NgForOf],
        templateUrl: './product.component.html',
        styleUrl: './product.component.css',
    })
  

ProductComponent Class

Properties

• productService: Injected instance of ProductService (private).

• products: Public array to hold Product objects.

Methods

• ngOnInit(): Fetches products upon component initialization.

• addToCart(): Alerts the user that a product has been added to the cart.

• addToWishlist(): Alerts the user that a product has been added to the wishlist.

Usage

To use the ProductComponent, include it in the template as follows:

<app-product></app-product>

Dependencies

• ProductService: Responsible for fetching product data.

• NgForOf directive: To iterate through products for display.

• Product model: Defines the structure of product objects.

---

ProductService Overview

import { Injectable } from '@angular/core';
import { Product } from './product.model';
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root',
})
export class ProductService {
    placeholder = 'https://placehold.co/250';
    private readonly products: Product[] = [
        {
            id: 1,
            name: 'Coffee Maker',
            price: 1199,
            description: 'Automatic machine brews coffee with a button.',
            imageUrl: this.placeholder,
        },
        {
            id: 2,
            name: 'Resistance Bands',
            price: 599,
            description: 'Versatile exercise bands offering varying resistance levels.',
            imageUrl: this.placeholder,
        },
        {
            id: 3,
            name: 'Digital Air Fryer',
            price: 299,
            imageUrl: this.placeholder,
            description: 'Using hot air circulation for crispy meals with less oil.',
        },
        {
            id: 4,
            name: 'Foldable Laptop',
            price: 75999,
            description: 'Portable adjustable stand that improves posture and airflow.',
            imageUrl: this.placeholder,
        },
        {
            id: 5,
            name: 'Yoga Mat',
            price: 499,
            description: 'Non-slip mat providing support for yoga and fitness routines.',
            imageUrl: this.placeholder,
        },
        {
            id: 6,
            name: 'Bluetooth Speaker',
            price: 1299,
            description: 'Connects via Bluetooth for high-quality sound and hands-free calls.',
            imageUrl: this.placeholder,
        },
        {
            id: 7,
            name: 'Electric Toothbrush',
            price: 3599,
            description: 'Rechargeable with rotating bristles and multiple modes.',
            imageUrl: this.placeholder,
        },
        {
            id: 8,
            name: 'Travel Neck Pillow',
            price: 599,
            description: 'For comfort during long journeys to prevent neck strain.',
            imageUrl: this.placeholder,
        },
        {
            id: 9,
            name: 'Insulated Water Bottle',
            price: 199,
            description: 'Double-walled stainless steel bottle keeps drinks hot or cold for hours.',
            imageUrl: this.placeholder,
        },
        {
            id: 10,
            name: 'Puzzle Board Game',
            price: 149,
            description:'Promoting problem-solving and strategic thinking.',
            imageUrl: this.placeholder,
        },
        {
            id: 11,
            name: 'Essential Oil Diffuser',
            price: 99,
            description: 'Disperses essential oils into the air for a calming atmosphere.',
            imageUrl: this.placeholder,
        },
        {
            id: 12,
            name: 'Handheld Clothes Steamer',
            price: 129,
            description: 'Removes wrinkles quickly without an ironing board.',
            imageUrl: this.placeholder,
        },
        {
            id: 13,
            name: 'Wireless Charging Pad',
            price: 799,
            description: 'Charges compatible devices wirelessly, reducing cord clutter.',
            imageUrl: this.placeholder,
        },
        {
            id: 14,
            name: 'Silicone Food Containers',
            price: 499,
            description: 'Eco-friendly containers for storing food; collapsible.',
            imageUrl: this.placeholder,
        },
        {
            id: 15,
            name: 'Herbal Tea Sampler Set',
            price: 299,
            description: 'In sachets for exploring flavors and enjoying relaxing moments.',
            imageUrl: this.placeholder,
        },
    ];

    getProducts(): Observable<Product[]> {
        return new Observable<Product[]>((subscriber) => {
            subscriber.next(this.products);
            subscriber.complete();
        });
    }
}

ProductService is an Angular injectable service that manages product data.

Properties

• placeholder: URL string for placeholder images.

• products: Private readonly array of Product objects.

Methods

• getProducts(): Returns an Observable<Product[]> that emits the products array.

Usage Example

productService.getProducts().subscribe(products => {
    // Handle products array
});

Product Model

export interface Product {
    id: number;
    name: string;
    price: number;
    description: string;
    imageUrl: string;
}

The Product interface defines the structure for product objects:

• Properties:

  • id: Unique numeric identifier.

  • name: Product name/title.

  • price: Numeric price.

  • description: Text description of the product.

  • imageUrl: URL string for the product image.

Rendering Products

The HTML template for rendering products is structured as follows:

<main class="container">
    <div class="card" *ngFor="let product of products">
        <img [src]="product.imageUrl" alt="" />
        <h1>{{ product.name }}</h1>
        <h2>₱ {{ product.price }}</h2>
        <h2>{{ product.description }}</h2>

        <button class="btn btn--primary" (click)="addToCart()">
            Add to Cart
        </button>

        <button class="btn btn--secondary" (click)="addToWishlist()">
            Add to Wishlist
        </button>
    </div>
</main>

Template Breakdown

• <main>: Container for the product grid.

• Product Card: Uses *ngFor to iterate over the products array, displaying each product.

• Product Content: Displays the product's image, name, and description.

• Action Buttons: Includes buttons for adding to cart and wishlist, with click events that trigger component methods.

CSS Classes

The styling follows a BEM naming convention:

• container: Grid layout container.

• card: Wrapper for product cards.

• btn: Base styles for buttons.

• btn--primary: Styles for primary buttons (e.g., Add to Cart).

• btn--secondary: Styles for secondary buttons (e.g., Add to Wishlist).

DESKTOP

TABLET

MOBILE

---

Github Repository Link: Darsssiiieee/SIA102-ACT31

Web URL from Firebase hosting: SIA102 - ACT31