In the previous article, we completed our e-commerce website side menu and now in this tutorial we learn about how to load the product list dynamically in angular.
First we need to know about {{example}} interpolation syntax, *ngFor and Let of keywords in angular 9
Example: If you want to generate a car list from array of json dynamically
Car.component.ts =>
carList = [{name:bmw},{name:ford},{name:tesla}];
<ul><li *ngFor=’let car of carList’>{{car.name}}</li></ul>
Above code will generate:
<ul>
<li>bmw</li>
<li>ford</li>
<li>tesl</li>
</ul>
*ngFor is a directive for looping a group of list from json or array or array of json.
{{car.name}} => car is the current object when looping and {{}} is an interpolation syntax to display the data.
Let’s jump into our ecommerce project, load product list from array of json. Design and code below
Code: product.component.html
<div class=”container-fluid mt-5 pt-5″>
<div class=”row”>
<div class=”col-12″>
<h6 class=”text-left”>Men’s wear</h6>
</div>
</div>
<div class=”row”>
<div class=”col-sm-6 col-md-3 col-xs-12 col-12 mb-4 ” *ngFor=’let prod of data.productList’>
<div class=”card” >
<i class=”fa fa-heart-o fav”></i>
<img class=”card-img-top ” style=”height:220px” src=”{{prod.picture}}” alt=”Card image cap”>
<div class=”card-body ” style=”background-color: #f9f9f9;”>
<h6 class=”card-title text-left “>{{prod.name}}</h6>
<p class=”card-text text-left mb-0″>Price: <span class=”font-weight-bold float-right text-success”>{{prod.price}}</span></p>
<p class=”card-text text-left “>Stock left: <span class=”font-weight-bold float-right text-danger”>{{prod.stock}}</span></p>
<!– <a href=”#” class=”btn btn-primary”>Add to Cart somewhere</a> –>
</div>
</div>
</div>
</div>
</div>
Code: product.component.ts
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-products’,
templateUrl: ‘./products.component.html’,
styleUrls: [‘./products.component.css’]
})
export class ProductsComponent implements OnInit {
public data;
constructor() { }
ngOnInit(): void {
// array of json for product list
this.data ={
result:status,
productList:[
{
“_id”: “5e804e29a915bb6a2297cfed”,
“index”: 0,
“price”: “$31.79”,
“picture”: “/assets/image/Round-Neck-Wear-Tshirt.jpg”,
“name”: “Duffy Houston”,
“company”: “EQUITAX”,
“stock”: 88
},
{
“_id”: “5e804e29c0165da9c25fdf9c”,
“index”: 1,
“price”: “$32.92”,
“picture”: “/assets/image/2.jpg”,
“name”: “Sanford Stanley”,
“company”: “ZILLA”,
“stock”: 42
},
{
“_id”: “5e804e29421be457e0764462”,
“index”: 2,
“price”: “$26.05”,
“picture”: “/assets/image/3.jpg”,
“name”: “Tracey Fleming”,
“company”: “RODEMCO”,
“stock”: 85
},
{
“_id”: “5e804e296cd363835b6b1904”,
“index”: 3,
“price”: “$34.00”,
“picture”: “/assets/image/4.jpg”,
“name”: “Howe Ruiz”,
“company”: “ARCTIQ”,
“stock”: 27
},
{
“_id”: “5e804e29f434203d0037bf41”,
“index”: 4,
“price”: “$14”,
“picture”: “/assets/image/5.jpg”,
“name”: “Powers Kaufman”,
“company”: “EXOSPACE”,
“stock”: 44
},
{
“_id”: “5e804e295884556517418658”,
“index”: 5,
“price”: “$48.41”,
“picture”: “/assets/image/6.jpg”,
“name”: “Pugh Pierce”,
“company”: “ZILPHUR”,
“stock”: 64
},
{
“_id”: “5e804e2940f3837a558497b9”,
“index”: 6,
“price”: “$27.59”,
“picture”: “/assets/image/7.jpg”,
“name”: “Fuentes Booth”,
“company”: “MANUFACT”,
“stock”: 23
}
]
}
}
}
Code: product.component.css
.card{
cursor: pointer;
}
.fav{
position: absolute;
top:0;
right:0;
color:#ff9800;
font-weight: bold;
padding:15px;
background:rgba(0,0,0,0.2)
}
Now You can see the wonderful product list dynamically loaded. If you want the exact design go and add bootstrap and font-awesome in angular. All Style and html are provided in the previous sections.
In the next article, we see how to load data from a server or local file with req and post ajax call in angular 9.