Create a List of Object Data Structures
product.service.ts
import { Injectable } from '@angular/core';
import { Product } from './product.model';
@Injectable({
providedIn: 'root',
})
export class ProductService {
getProducts(): Product[] {
return [
{
name: 'God of War™ Ragnarok – PC',
description: 'From Santa Monica Studio comes the sequel to the critically acclaimed God of War (2018). Embark on an epic and heartfelt journey as Kratos and Atreus struggle with holding on and letting go. Brought to PC by Jetpack Interactive.',
price: 59.99,
imageUrl: 'https://media.direct.playstation.com/is/image/sierialto/GOWR-PC-Hero-1-Main?$Catalog_Desktop$',
},
{
name: 'God of War™ Ragnarok Digital Deluxe Edition – PC',
description: 'From Santa Monica Studio comes the sequel to the critically acclaimed God of War (2018). Embark on an epic and heartfelt journey as Kratos and Atreus struggle with holding on and letting go. Brought to PC by Jetpack Interactive.',
price: 69.99,
imageUrl: 'https://media.direct.playstation.com/is/image/sierialto/GOWR-DDE-PC-Hero-1?$Catalog_Desktop$',
},
{
name: 'Ghost of Tsushima™ Director Cut - PC',
description: ' For the very first time on PC, play through Jin Sakai’s journey and discover the complete Ghost of Tsushima experience in this Director’s Cut.',
price: 59.99,
imageUrl: 'https://media.direct.playstation.com/is/image/sierialto/ps5-ghostoftsushima-directorscut-game-box-front?$Background_Large$',
},
{
name: 'Stellar Blade™ – PS5',
description: 'Save humanity from extinction in this electrifying story-driven action adventure, made by Korean developer SHIFT UP, exclusively for PlayStation®5.',
price: 49.99,
imageUrl: 'https://media.direct.playstation.com/is/image/sierialto/StellarBlade-Hero-1-US?$Background_Large$',
},
{
name: 'Marvels Spider-Man 2 – PS5',
description: 'Swing, jump, and utilize the new Web Wings to travel across Marvel’s New York, quickly switching between Peter Parker and Miles Morales to experience different stories and epic new powers, as the iconic villain Venom threatens to destroy their lives, their city, and the ones they love.',
price: 39.99,
imageUrl: 'https://media.direct.playstation.com/is/image/sierialto/ps5-msm2-box-front?$Background_Large$',
},
{
name: 'God of War - PC',
description: 'His vengeance against the Gods of Olympus years behind him, Kratos now lives as a man in the realm of Norse Gods and monsters. It is in this harsh, unforgiving world that he must fight to survive… and teach his son to do the same.',
price: 49.99,
imageUrl: 'https://media.direct.playstation.com/is/image/sierialto/pc-god-of-war-hero2?$Background_Large$',
},
{
name: 'Horizon Zero Dawn™ Remastered - PS5',
description: 'Experience the critically acclaimed Horizon Zero Dawn™ with stunning new visuals and upgraded features.',
price: 49.99,
imageUrl: 'https://media.direct.playstation.com/is/image/sierialto/Horizon-ZDR-Hero-1-US?$Background_Large$',
},
{
name: 'Rise of the Ronin™ - PS5',
description: 'Japan, 1863. Amidst the chaos of a country ravaged by war, disease, and political unrest, a Ronin steps forth – holding the nation’s fate in their hands. ',
price: 39.99,
imageUrl: 'https://media.direct.playstation.com/is/image/sierialto/Rise-of-ronin-hero-1-US-New?$Background_Large$',
},
{
name: 'HELLDIVERS™ 2 - PS5 ',
description: 'Join the Helldivers and fight for freedom with friends across a hostile galaxy in this fast, frantic third-person shooter.',
price: 29.99,
imageUrl: 'https://media.direct.playstation.com/is/image/sierialto/PS5-HD2-pksht-en-us?$Background_Large$',
},
{
name: 'DEATH STRANDING™ Directors Cut - PS5',
description: 'From legendary game creator Hideo Kojima comes a genre-defying experience, now expanded and remastered for the PlayStation®5 console in this definitive Director’s Cut.',
price: 19.99,
imageUrl: 'https://media.direct.playstation.com/is/image/sierialto/death-stranding-directorscut-ps5-game-box-front?$Background_Large$',
},
];
}
}
product.model.ts
export interface Product {
price: number;
name: string;
description: string;
imageUrl: string;
}
product.component.ts
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductService } from './product.service';
@Component({
selector: 'app-product',
standalone: true,
templateUrl: './product.component.html',
styleUrls: ['./product.component.css'],
imports: [CommonModule],
providers: [ProductService],
})
export class ProductComponent implements OnInit {
products: any[] = [];
constructor(private productService: ProductService) {}
ngOnInit(): void {
this.products = this.productService.getProducts();
}
}
product.component.html
<div class="product-grid">
<div class="product-card" *ngFor="let product of products">
<img
class="product-card__image"
[src]="product.imageUrl"
[alt]="product.name"
onerror="this.src='assets/images/placeholder.jpg';"
/>
<div class="product-card__badges">
</div>
<h3 class="product-card__title">{{ product.name }}</h3>
<p class="product-card__description">{{ product.description }}</p>
<p class="product-card__price">${{ product.price | number: '' }}</p>
<div class="product-card__buttons">
<button class="button button--primary">Cart</button>
</div>
</div>
</div>
Use Grid and flex
Use Grid and Flex for layout.
Follow the BEM CSS architecture.
Use 2 columns for mobile, 3 columns for tablets, and 5 columns for desktops.
product.component.css
.product-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
}
@media (min-width: 768px) {
.product-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.product-grid {
grid-template-columns: repeat(5, 1fr);
}
}
.product-card {
background-color: #fff;
border: 1px solid #d0cdcd;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
padding: 15px;
transition: transform 0.3s ease;
}
.product-card__price {
font-size: 1.1rem;
color: #444;
margin-bottom: 10px;
font-weight: bold;
}
.product-card:hover {
transform: translateY(-5px);
}
.product-card__image {
width: 100%;
height: 160px;
object-fit: contain;
border-radius: 100px;
}
.product-card__badges {
margin: 10px 0;
}
.badge {
display: inline-block;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: bold;
margin-right: 5px;
}
.badge--primary {
background-color: #007bff;
color: #fff;
}
.badge--secondary {
background-color: #6c757d;
color: #fff;
}
.product-card__title {
font-size: 1.2rem;
margin: 10px 0 5px;
color: #333333;
}
.product-card__description {
font-size: 0.9rem;
color: #666666;
margin-bottom: 15px;
}
.product-card__buttons {
margin-top: auto;
}
.button {
padding: 8px 15px;
border: none;
border-radius: 4px;
font-size: 0.9rem;
cursor: pointer;
margin: 5px;
transition: background-color 0.3s ease;
}
.button--primary {
padding: 8px 20px;
border: 2px solid #000;
border-radius: 50px;
background-color: #fff;
color: #000;
font-size: 1.25rem;
padding: 0.25rem 1rem;
font-weight: bold;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.button--primary:hover {
background-color: #000 ;
color: #fff;
}
Output
Mobile
Tablet
PC
firebase hosting
type “firebase init”
then type “firebase deploy”
to push the files in git repository use this codes
echo "# Angular-Ecommerce-Product-List" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/kaysie0919/Angular-Ecommerce-Product-List.git
git push -u origin main
firebase link: https://amador-product-list.web.app
git repo link: https://github.com/kaysie0919/Angular-Ecommerce-Product-List.git