Activity 31: Angular Ecommerce Product List
This component displays a dynamic list of products for an ecommerce platform, built using Angular. Each product is shown with its image, name, and price. Users can interact with the products by adding them to their shopping cart or viewing detailed information. The product data is fetched from a service, and the list is rendered using Angular's *ngFor directive, ensuring a responsive and interactive experience for users. This setup demonstrates a simple yet effective way to manage and display products in an Angular-based ecommerce application.
product.service.ts
import { Injectable } from '@angular/core';
import { Product } from './product.model';
@Injectable({
providedIn: 'root',
})
export class ProductService {
constructor() { }
getProducts(): Product[] {
return [
{ id: 1, name: 'Rose Lip Balm', price: 796, imageUrl: 'assets/images/rose-lip-balm.jpg' },
{ id: 2, name: 'Lavender Face Cream', price: 650, imageUrl: 'assets/images/lavender-face-cream.jpg' },
{ id: 3, name: 'Pink Blush Powder', price: 350, imageUrl: 'assets/images/pink-blush-powder.jpg' },
{ id: 4, name: 'Peach Nail Polish', price: 120, imageUrl: 'assets/images/peach-nail-polish.jpg' },
{ id: 5, name: 'Vanilla Body Scrub', price: 220, imageUrl: 'assets/images/vanilla-body-scrub.jpg' },
{ id: 6, name: 'Jasmine Perfume', price: 320, imageUrl: 'assets/images/jasmine-perfume.jpg' },
{ id: 7, name: 'Cherry Lip Gloss', price: 130, imageUrl: 'assets/images/cherry-lip-gloss.jpg' },
{ id: 8, name: 'Coconut Hair Oil', price: 200, imageUrl: 'assets/images/coconut-hair-oil.jpg' },
{ id: 9, name: 'Lemon Facial Mist', price: 180, imageUrl: 'assets/images/lemon-facial-mist.jpeg' },
{ id: 10, name: 'Grapefruit Shower Gel', price: 210, imageUrl: 'assets/images/grapefruit-shower-gel.jpg' },
];
}
}
This code defines an Angular service, ProductService, marked with @Injectable to make it available for dependency injection. It includes a method, getProducts(), which returns a hardcoded list of product objects, each with properties like id, name, price, and imageUrl. This service can be used across the app to provide product data.
product.model.ts
export interface Product {
id: number;
name: string;
price: number;
imageUrl: string;
}
This code defines a TypeScript interface Product that specifies the structure for a product object.
Each product must have:
id: a numeric identifier,name: the product's name as a string,price: the product's price as a number,imageUrl: the URL of the product's image as a string.
product.component.ts
import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';
import { Product } from './product.model';
import { NgForOf } from '@angular/common';
@Component({
selector: 'app-product',
standalone: true,
templateUrl: './product.component.html',
styleUrls: ['./product.component.scss'],
imports: [
NgForOf,
]
})
export class ProductComponent implements OnInit {
products: Product[] = [];
constructor(private productService: ProductService) {}
ngOnInit(): void {
this.products = this.productService.getProducts();
}
addToCart(product: Product): void {
console.log('Added to Cart:', product);
}
viewDetails(product: Product): void {
console.log('Viewing details for:', product);
}
}
This Angular component, ProductComponent, displays a list of products and provides methods for interacting with them. Here's a breakdown:
1. Imports
ComponentandOnInit: Define the component and allow it to initialize when loaded.ProductService: Provides product data.Product: Ensures the products have a consistent structure.NgForOf: Used in the template to iterate over the list of products.
2. Component Metadata
typescriptCopy code@Component({
selector: 'app-product',
standalone: true,
templateUrl: './product.component.html',
styleUrls: ['./product.component.scss'],
imports: [NgForOf],
})
selector: Identifies the component as<app-product>.standalone: Indicates the component doesn't rely on an Angular module.templateUrlandstyleUrls: Reference the HTML and CSS files.imports: Specifies Angular directives or standalone modules (likeNgForOf) used in the component.
3. Component Logic
products: Product[]: Holds the list of products.constructor: Injects theProductServiceto access product data.ngOnInit: Initializes the component by fetching products viagetProducts()fromProductService.addToCart(product): Logs a message when a product is added to the cart.viewDetails(product): Logs a message when product details are viewed.
product.component.html
<div class="product-list">
<div class="product-list__item" *ngFor="let product of products">
<img
[src]="product.imageUrl"
alt="{{ product.name }}"
class="product-list__item-image"
width="150"
height="150"
/>
<h3 class="product-list__item-name">{{ product.name }}</h3>
<p class="product-list__item-price">₱{{ product.price }}</p>
<!-- Add to Cart Button -->
<button
class="product-list__item-button add-to-cart"
(click)="addToCart(product)"
>
Add to Cart
</button>
<button
class="product-list__item-button view-details"
(click)="viewDetails(product)"
>
View Details
</button>
</div>
</div>
1. Container for Product List
htmlCopy code<div class="product-list">
product-list: This is the main container that holds all product items.
2. Loop Through Products
htmlCopy code<div class="product-list__item" *ngFor="let product of products">
*ngFor="let product of products": Iterates over theproductsarray from theProductComponentto create a new product item for each entry.
3. Product Image
htmlCopy code<img
[src]="product.imageUrl"
alt="{{ product.name }}"
class="product-list__item-image"
width="150"
height="150"
/>
[src]="product.imageUrl": Dynamically sets the image source to theimageUrlof the current product.alt="{{product.name}}": Uses the product name as the alt text for the image.widthandheight: Sets the image dimensions.
4. Product Name
htmlCopy code<h3 class="product-list__item-name">{{ product.name }}</h3>
{{product.name}}: Displays the name of the product.
5. Product Price
htmlCopy code<p class="product-list__item-price">₱{{ product.price }}</p>
₱{{ product.price }}: Displays the price of the product with the peso symbol.
6. Add to Cart Button
htmlCopy code<button
class="product-list__item-button add-to-cart"
(click)="addToCart(product)"
>
Add to Cart
</button>
(click)="addToCart(product)": Calls theaddToCartmethod from the component when clicked, passing the current product.
7. View Details Button
htmlCopy code<button
class="product-list__item-button view-details"
(click)="viewDetails(product)"
>
View Details
</button>
(click)="viewDetails(product)": Calls theviewDetailsmethod from the component when clicked, passing the current product.
OUTPUT:
DESKTOP
TABLET
MOBILE
