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'])
}
}