product.service.ts

This is a TypeScript file that defines a service called ProductService. This service is responsible for managing a list of products. It has a private property called productList which is an array of Product objects. Each Product object has properties like price, image, name, and rate. The service provides a method getProductList() which returns the productList. This service is likely used in an Angular application to provide data for a product catalog or a shopping cart.

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

@Injectable({
  providedIn: 'root',
})
export class ProductService {
  private productList: Product[] = [
    {
      price: 7895,
      image:
        'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/7a5cee8a-5b59-443d-b22d-13879f55e7ce/W+AIR+ZOOM+PEGASUS+41+OLY.png',
      name: 'Nike Pegasus 41 Electric',
      rate: '★★★☆☆',
}

,
{
  price: 7395,
    image:
        'https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/b98662cf-c7e1-45fe-97a5-76545df46e31/W+AIR+ZOOM+PEGASUS+41+FP.png',
      name: 'Nike Pegasus 41 Blueprint',
      rate: '★★★☆☆',
    },
    {
      price: 10895,
      image:
        'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/890d1a70-dccc-46f3-9c92-1f7c340d2a6b/NIKE+AIR+ZOOM+G.T.+JUMP+2+OLY.png',
      name: 'Nike G.T. Jump 2 Electric  ',
      rate: '★★☆☆☆',
    },
    {
      price:7395,
      image:
        'https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/e1dfe56f-aef5-4e68-8378-e8c44e9421d6/AIR+ZOOM+PEGASUS+41.png',
      name: 'Nike Pegasus 41',
      rate: '★☆☆☆☆',
    },
    {
      price: 5095,
      image:
        'https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/8ce97c97-3cb9-4e7f-86f4-6f39eef4b2b2/W+BLAZER+MID+%2777+NEXT+NATURE.png',
      name: 'Nike Blazer Mid 77',
      rate: '★★★★☆',
    },
    {
      price: 2479,
      image:
        'https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/3be3e847-08d7-4d74-9acd-5985d6d7cf2c/W+BLAZER+MID+%2777+VNTG.png',
      name: 'Nike Blazer Mid 77 Vintage',
      rate: '★★★★',
    },

  ];

  getProductList() {
    return this.productList;
  }
}

product.model.ts

This is a TypeScript file that defines an interface called Product. This interface defines the structure of a product object. It has four properties:

price: A number representing the price of the product.
image: A string representing the URL of the product image.
name: A string representing the name of the product.
description: A string representing the description of the product.

This interface is likely used in an Angular application to define the data model for products. It ensures that all product objects have the same structure and properties, making it easier to work with and manage product data.

How would I use this Product interface in my Angular component to display product information on a page?

Can you give me an example of how to create a new Product object using this interface?

Is there a way to extend this Product interface to add more properties, like a product category or a unique identifier?

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

product.component.ts

This TypeScript file defines a component called ProductComponent in an Angular application.

Key points:

Import Statements: It imports necessary modules like Component, OnInit, ProductService, and Product.
Component Decorator: The @Component decorator defines the component's metadata, including its selector (app-product), template URL (./product.component.html), and style URL (./product.component.css).
Class Definition: The ProductComponent class implements the OnInit interface, indicating that it has an ngOnInit lifecycle hook.
Constructor: The constructor injects the ProductService into the component.
ngOnInit Method: The ngOnInit method is called when the component is initialized. It fetches the list of products from the ProductService and assigns it to the productList property.

Overall, this component is responsible for:

Displaying a list of products on the page.
Fetching product data from the ProductService.
Likely using the productList to dynamically render the product information in the product.component.html template.

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { ProductService } from '../../services/product.service';
import { Product } from '../../model/product.model';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrl: './product.component.css',
})
export class ProductComponent implements OnInit {
  productList: Product[] = [];

  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.productList = this.productService.getProductList();
  }
}

product.component.html

This is an HTML template for an Angular component that displays a list of products. Here's a breakdown:

Structure:

<h1> Heading: "Activity 31: Angular Ecommerce Product List" - This is a title for the component.
<main> Element: The main content area of the component. It has the class "roboto-regular" suggesting it uses a specific font.
@for Loop: This loop iterates through the productList array, which is likely populated by data from the ProductService. For each product, it generates a <div> with the class "product-card".
<div class="product-card">: Represents a single product item. It contains:
- <div class="product-card__image__container">: A container for the product image.
  - <img>: Displays the product image. The [src] binding dynamically sets the image source based on the product.image property.
- <div class="product-card__details">: Contains the product details.
  - <p class="product-card__details__name">: Displays the product name using the product.name property.
  - <p class="product-card__details__description">: Displays the product rating using the product.rate property.
  - <p class="product-card__details__price">: Displays the product price formatted as PHP currency using the product.price property and Angular's currency pipe.
  - <div class="button-container">: Contains buttons for adding to the cart and buying the product.
    - <button class="button-cart">: A button that adds the product to the cart.
    - <button class="button-buy">: A button that allows the user to buy the product.

Key Features:

Data Binding: The [src] binding on the <img> tag dynamically sets the image source. The {{ }} interpolation is used to display product details from the product object.
Angular Pipes: The currency pipe formats the price as PHP currency.
Styling: The template uses CSS classes to style the product cards and their elements. These classes likely define the appearance of the product list, including fonts, colors, and layout.

Functionality:

This template is designed to dynamically generate a product list based on data provided by the ProductService.
The buttons likely have event handlers (not shown in the template) that trigger actions like adding products to the cart or proceeding to checkout.

<h1>Activity 31: Angular Ecommerce Product List</h1>
<main class="roboto-regular">
  @for(product of productList; track $index){
  <div class="product-card">
    <div class="product-card__image__container">
      <img class="product-card__image" [src]="product.image" />
    </div>
    <div class="product-card__details">
      <p class="product-card__details__name roboto-bold">
        {{ product.name }}
      </p>
      <p class="product-card__details__description multiline-ellipsis">
        {{ product.rate }}
      </p>
      <p class="product-card__details__price roboto-black">
        {{ product.price | currency : "PHP" }}
      </p>
      <div class="button-container">
        <button class="button-cart roboto-medium">Cart</button>
        <button class="button-buy roboto-medium">Buy</button>
      </div>
    </div>
  </div>
  }
</main>

GITHUB LINK :

https://github.com/jerome09232/activity31

FIREBASE LINK:

https://activity31-b78b4.web.app/

Activity 31: Angular Ecommerce Product List