christinejane maitom's blog

Activity 31: Angular Ecommerce Product List

christinejane maitom's photo
christinejane maitom
·

4 min read

Creating a Model for Products

We need to create a model for our products. This will define the structure of the product objects, which will be used throughout the application.

products.list.ts

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

This product list has a defined structure with properties for an name, description, price, and imageUrl.

Creating the Product Service

So next, we need a service to manage the product data. We'll use mock data to simulate a product list.

product.list.service.ts

import { Injectable } from '@angular/core';
import { Product } from './product-list';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

    products: Product[] = [
        {
          name: 'Floral Romper ',
          description: 'Cute Newborn Baby Girl Outfits | Floral Romper Shorts Set for Summer',
          price: 1621,
          image: 'https://m.media-amazon.com/images/I/71XorvtAnoL._AC_SL1500_.jpg'
        },
        {
          name: 'Travel Steamer',
          description: 'Travel Steamer For Clothes Portable Mini, 1470w Handheld Clothes Steamer With 120ml Tank, 30s Fast Heat-up, Garment Steamer & Steam Iron, Horizontal & Vertical, For Home Office Travel, Fabric Steamer',
          price: 4722,
          image: 'https://m.media-amazon.com/images/I/61cx-AydRkL._AC_SL1500_.jpg'
        },
        {
          name: 'Sleeved Clothe',
          description: 'Sleeved Clothes Winter Bathrobe Shawl Lengthened Plush Robe Coat Mens Home Long Womens Lightweight Casual Top',
          price: 2389,
          image: 'https://m.media-amazon.com/images/I/61vygE1FXJL._AC_SL1500_.jpg'
        },
        {
          name: 'Long Sleeved',
          description: '2024 Mens Casual Fashion Long Sleeved Shirt Workout Shirts Loose',
          price: 2385,
          image: 'https://m.media-amazon.com/images/I/61eMYTyUu-L._AC_SL1500_.jpg'
        },
        {
          name: ' Sneakers Air',
          description: 'Womens Casual Stylish Sneakers Air Cushioned Soft Comfortable Breathable Walking Shoes Lace-Up Sneakers for Workout Tennis',
          price: 2235,
          image: 'https://m.media-amazon.com/images/I/61JViWxHCmL._AC_SL1500_.jpg'
        },   
        {
            name: 'Polarized Sunglasses',
            description: 'retro classic HD real glass lens stylish polarized sunglasses',
            price: 1699,
            image: 'https://m.media-amazon.com/images/I/41Zr6dBHLWL._AC_SL1080_.jpg'
          },
          {
            name: '10 Mil Nitrile-Gloves',
            description: '10 Mil Nitrile-Gloves Disposable Gloves,Heavy Duty Rubber Gloves Latex Free, Chemical-Resistance, Diamond Grip Gloves.',
            price: 999,
            image: 'https://m.media-amazon.com/images/I/71n9kNUk92L._AC_SL1500_.jpg'
          },
          {
            name: 'Printed Handbags',
            description: 'Tote Bag For Women Letter Printed Handbags Shoulder Bags Lightweight Purse Fashion Large Capacity Bags For Shopping Essential',
            price: 1655,
            image: 'https://m.media-amazon.com/images/I/61VbrZFeqBL._AC_SL1500_.jpg'
          },
          {
            name: 'Shoes',
            description: 'Mens Lightweight Running Shoes | Non-Slip Sports Sneakers for Workout & Casual Athletic.',
            price: 2675,
            image: 'https://m.media-amazon.com/images/I/71hEx43hesL._AC_SL1500_.jpg'
          },
          {
            name: 'Dress',
            description: 'aihihe Womens Cotton Linen Dress Floral Print Short Sleeve Buttoned Spread Collar Midi Dress 2024 Spring Summer Trendy Dress.',
            price: 1855,
            image: 'https://m.media-amazon.com/images/I/61U4G9q0UtL._AC_SL1500_.jpg'
          },    



  ];

  getProducts(): Product[] {
    return this.products;
  }
}

Creating the Product Component

Now, the product component is responsible for displaying the product list retrieved from the service.

product.list.component.ts

import { Component, OnInit } from '@angular/core';
import { Product } from './product-list';
import { ProductService } from './product-list.service';
@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrl: './product-list.component.css'
})
export class ProductListComponent implements OnInit {
  products: Product[] = [];

  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.products = this.productService.getProducts();
  }
}

The component initializes by fetching the list of products using the ProductService.

Displaying Products in the Component
The HTML structure for the product grid uses Angular's *ngFor directive to iterate over the products and display them.

product.component.html

The component initializes by fetching the list of products using the Product.list.Service.ts.

Displaying Products in the Component

The HTML structure for the product grid uses Angular's *ngFor directive to iterate over the products and display them.

product.list.component.html

<div class="product-container">
    <div class="product-grid">
      <div *ngFor="let product of products" class="product-item">
        <img [src]="product.image" alt="Product Image" class="product-image">
        <h3 class="product-name">{{ product.name }}</h3>
        <p class="product-description">{{ product.description }}</p>
        <p class="product-price">${{ product.price }}</p>
        <button class="product-button-add">Add to Cart</button>
        <button class="product-button-buy">Buy</button>
      </div>
    </div>
  </div>

BEM CSS Architecture for Styling

Now, let’s apply BEM CSS architecture to our styles for maintainability and clarity.

product.list.component.css

.product-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }

  .product-item {
    background-color: #2b6e51;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
    text-align: center;
  }

  .product-image {
    width: 100%;
    height: 230px;
    object-fit: contain;
    border-radius: 10px;
  }

  .product-name {
    font-size: 1.2em;
    margin: 8px 0;
  }

  .product-description {
    font-size: 0.9em;
    color: #160e0e;
  }

  .product-price {
    font-weight: bold;
    margin: 8px 0;
  }

  .product-button-add {
    background-color:rgb(88, 64, 64);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius:50px;
    margin: 5px;
  }
  .product-button-buy {
    background-color:rgb(82, 67, 67);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius:50px;
    margin: 5px;
  }

  /* Responsive Layout */
  @media (max-width: 768px) {
    .product-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 480px) {
    .product-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

OUTPUT

DESKTOP

TABLET

MOBILE

GitHub Repo:https://github.com/ChristineMaitom/Angular-Ecommerce-Product-List

Hosting Url:https://maitom-ecommerces-product-list.web.app/