How to dynamically load product list page in angular 9 | E-commerce

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.

Leave a Reply

Your email address will not be published. Required fields are marked *