import { Pipe, PipeTransform } from '@angular/core';
import { Product } from '../models/product';
@Pipe({
  name: 'filterProductsByBrand',
})
export class FilterProductsPipe implements PipeTransform {
  transform(input: Product[], brand?: String): any {
	let output: Product[] = [];
	if (brand == '') output = input;
	else output = input.filter((item) => item.brand == brand);
	return output;
  }
}

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Product, ProductResponse } from '../../models/product';
import { ProductService } from '../../services/product.service';
@Component({
  selector: 'app-products-list',
  templateUrl: './products-list.component.html',
  styleUrls: ['./products-list.component.css'],
})
export class ProductsListComponent implements OnInit {
  selectedBrand: String = '';
  productResponse!: ProductResponse;
  products: Product[];
  constructor(private ProductService: ProductService, private Router: Router) {}
  ngOnInit(): void {
	this.getPoducts();
  }
  public getPoducts() {
	this.ProductService.getProducts().subscribe((response) => {
	  this.productResponse = response;
	  this.products = this.productResponse.products;
	});
  }
}

<div class="mb-3">
  <select
	[(ngModel)]="selectedBrand"
	(change)="getPoducts()"
	class="form-select"
  >
	>
	<option selected value="">All brands</option>
	<option value="Apple">Apple</option>
	<option value="Samsung">Samsung</option>
  </select>
</div>
<!-- Card list Begin -->
<ng-container *ngIf="productResponse">
  <div class="row">
	<div
	  *ngFor="let product of products | filter: filterProductsByBrand"
	  class="product col-sm-6 col-md-4"
	>
	  <app-product-item [product]="product"></app-product-item>
	</div>
  </div> </ng-container
><!-- Card list End -->