Angular Part 6 – 2 : Add Product Category Filter| Create Ecommerce Angular Project

product.component.html

<section >
    <div class="row m-5">
        <div class="col-1">
        <ul class="nav flex-column">
            <li class="nav-item p-1">
                <button type="submit" class="nav-link active btn btn-warning" name="all">All</button>
              </li>
            <li class="nav-item p-1">
              <button type="submit" class="nav-link  btn btn-outline-warning" (click)="filterProduct('laptop')" name="laptop">Laptops</button>
            </li>
            <li class="nav-item p-1">
              <button type="submit" class="nav-link btn btn-outline-warning" (click)="filterProduct('mobile')">Mobile</button>
            </li>
            <li class="nav-item p-1">
              <button class="nav-link btn btn-outline-warning" (click)="filterProduct('watch')">Watches</button>
            </li>
            <li class="nav-item p-1">
              <button class="nav-link btn btn-outline-warning" (click)="filterProduct('camera')">Camera</button>
            </li>
          </ul>
        </div>
        <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>
</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'])
      
   }
   
addToCart(pid:any){
this.http_Cart.addToCartProduct(pid)
this.router.navigate(['/cart'])
}

filterProduct(val:string){
   if(val==''){
      val=this.product_list[0].category
   }
   this.category=val;
}
}

also update in flask app if requried