Angular Part 2 : Create Products List And Call API In TS File | Create Ecommerce Angular Project

In This List The Products Grid

services/product.service.ts

getProductlist(){
    let httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
        }),
    }
    return this.http_service.get(this.base_url+"product",httpOptions)
}
getlimitProductlist(limit:number){

    let httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
        }),
    }
    return this.http_service.get(this.base_url+"product?limit="+limit,httpOptions)
}

product.component.html

<section >
   <div class="col-11">
    <div class="text-center row">
        <ng-container *ngFor="let product of product_list">
            
            <div *ngIf="product.category==category" class="col-sm-2 card m-1 p-1 shadow-lg bg-white rounded">
                <img src={{product.image_url}} width="100%" height="50%">
                <h6 class="overflow-hidden " [routerLink]="['/single-product',product.id]">{{ product.title | slice:0:50}}</h6>
                <p>Price: {{product.price}}<br/>
                  Rating: {{product.rating}}<br/>
                  Category: {{product.category}}</p>
                <div >
                    <button class="btn btn-warning" type="submit"
                       (click)="addToCart(product.id)"><i class="bi bi-cart-plus-fill"></i></button>
                        <button class="btn btn-warning m-1" type="submit"
                        [routerLink]="['/single-product',product.id]"><i class="bi bi-eye-fill"></i></button>
                    <button class="btn btn-warning m-1" type="submit"
                        onClick="window.open('https://shop.softwaretechit.com')">Buy Now</button>
                </div>
            </div>
        </ng-container>
    </div>
</div>
</section>

product.component.ts

import { Component, OnInit,Input } from "@angular/core";
import { Router } from "@angular/router";
import { Subscriber } from "rxjs";
import { ProductModel } from "../models/product.model";
import { CartService } from "../services/cart.service";
import { ProductService } from "../services/product.service";
@Component({
    selector:"product-component",
    templateUrl:'./product.component.html',
    styleUrls:["product.component.css"],
    
})

export class ProductComponent implements OnInit{
   
   product_list:ProductModel[]=[];
   category='laptop';
   constructor(private product_httpservice:ProductService,private http_Cart:CartService,private router:Router){
   }
   ngOnInit(): void {
      this.product_httpservice.getProductlist().subscribe((data)=>this.product_list=data['result'])
      
   }
   

}