Angular Bootstrap 5 Filters plugin

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

export interface Item {
  id: number;
  color: string;
  price: number;
  sale: string;
  product: string;
  img: string;
  size: number[];
}

export interface BasicFilters {
  color: string | null;
  sale: string | null;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  items: Item[] = [
    {
      id: 1,
      color: 'black',
      price: 100,
      sale: 'no',
      product: 'Black Jeans Jacket',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
      size: [36, 40, 42],
    },
    {
      id: 2,
      color: 'black',
      price: 100,
      sale: 'no',
      product: 'Black Jeans Jacket',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
      size: [36, 38, 40, 42],
    },
    {
      id: 3,
      color: 'gray',
      price: 80,
      sale: 'yes',
      product: 'Gray Jumper',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
      size: [36, 38, 40],
    },
    {
      id: 4,
      color: 'gray',
      price: 80,
      sale: 'yes',
      product: 'Gray Jumper',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
      size: [40, 42],
    },
    {
      id: 5,
      color: 'red',
      price: 120,
      sale: 'yes',
      product: 'Red Hoodie',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
      size: [36, 40, 42],
    },
    {
      id: 6,
      color: 'blue',
      price: 90,
      sale: 'no',
      product: 'Blue Jeans Jacket',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
      size: [36, 38],
    },
  ];

  filteredItems$: Observable<Item[]>;
  filtersGroup: FormGroup;

  basicFilters: BasicFilters = {
    color: null,
    sale: null,
  };

  constructor() {
    this.filtersGroup = new FormGroup({
      color: new FormControl(),
      sale: new FormControl(),
    });

    this.filteredItems$ = this.filtersGroup.valueChanges.pipe(
      startWith(this.basicFilters),
      map((filters: BasicFilters) => {
        const { color, sale } = filters;
        let items = this.items;

        if (color) {
          items = items.filter((item) => item.color === color);
        }

        if (sale) {
          items = items.filter((item) => item.sale === sale);
        }

        return items;
      })
    );
  }

  clearFilters() {
    this.filtersGroup.reset();
  }
}

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

export interface Item {
  id: number;
  color: string;
  price: number;
  sale: string;
  product: string;
  img: string;
  size: number[];
}
export interface Filters {
  [key: string]: string | null;
  black: string | null;
  red: string | null;
  blue: string | null;
  gray: string | null;
  saleYes: string | null;
  saleNo: string | null;
}


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  items: Item[] = [
    {
      id: 1,
      color: 'black',
      price: 100,
      sale: 'no',
      product: 'Black Jeans Jacket',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
      size: [36, 40, 42],
    },
    {
      id: 2,
      color: 'black',
      price: 100,
      sale: 'no',
      product: 'Black Jeans Jacket',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
      size: [36, 38, 40, 42],
    },
    {
      id: 3,
      color: 'gray',
      price: 80,
      sale: 'yes',
      product: 'Gray Jumper',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
      size: [36, 38, 40],
    },
    {
      id: 4,
      color: 'gray',
      price: 80,
      sale: 'yes',
      product: 'Gray Jumper',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
      size: [40, 42],
    },
    {
      id: 5,
      color: 'red',
      price: 120,
      sale: 'yes',
      product: 'Red Hoodie',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
      size: [36, 40, 42],
    },
    {
      id: 6,
      color: 'blue',
      price: 90,
      sale: 'no',
      product: 'Blue Jeans Jacket',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
      size: [36, 38],
    },
  ];

  filteredItems$: Observable<Item[]>;
  filtersGroup: FormGroup;

  defaultFilters: Filters = {
    black: null,
    red: null,
    blue: null,
    gray: null,
    saleYes: null,
    saleNo: null,
  };

  constructor() {
    this.filtersGroup = new FormGroup({
      black: new FormControl(),
      red: new FormControl(),
      blue: new FormControl(),
      gray: new FormControl(),
      saleYes: new FormControl(),
      saleNo: new FormControl(),
    });

    this.filteredItems$ = this.filtersGroup.valueChanges.pipe(
      startWith(this.defaultFilters),
      map((controls: Filters) => {
        let items = this.items;
        const colors = Object.keys(controls).filter(
          (control) => controls[control] && !control.startsWith('sale')
        );

        const sales = Object.keys(controls)
          .filter((control) => controls[control] && control.startsWith('sale'))
          .map((string) => string.toLowerCase().replace('sale', ''));

        if (colors.length > 0) {
          items = items.filter((item) => colors.some((color) => item.color === color));
        }

        if (sales.length > 0) {
          items = items.filter((item) => sales.some((sale) => item.sale === sale));
        }
        return items;
      })
    );

  }

  clearFilters() {
    this.filtersGroup.reset();
  }
}

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

export interface Item {
  id: number;
  color: string;
  price: number;
  sale: string;
  product: string;
  img: string;
  size: number[];
}
export interface Filters {
  [key: string]: string | number | null;
  36: number | null;
  38: number | null;
  40: number | null;
  42: number | null;
  sale: string | null;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  items: Item[] = [
    {
      id: 1,
      color: 'black',
      price: 100,
      sale: 'no',
      product: 'Black Jeans Jacket',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
      size: [36, 40, 42],
    },
    {
      id: 2,
      color: 'black',
      price: 100,
      sale: 'no',
      product: 'Black Jeans Jacket',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
      size: [36, 38, 40, 42],
    },
    {
      id: 3,
      color: 'gray',
      price: 80,
      sale: 'yes',
      product: 'Gray Jumper',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
      size: [36, 38, 40],
    },
    {
      id: 4,
      color: 'gray',
      price: 80,
      sale: 'yes',
      product: 'Gray Jumper',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
      size: [40, 42],
    },
    {
      id: 5,
      color: 'red',
      price: 120,
      sale: 'yes',
      product: 'Red Hoodie',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
      size: [36, 40, 42],
    },
    {
      id: 6,
      color: 'blue',
      price: 90,
      sale: 'no',
      product: 'Blue Jeans Jacket',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
      size: [36, 38],
    },
  ];

  filteredItems$: Observable<Item[]>;
  filtersGroup: FormGroup;


  defaultFilters: Filters = {
    36: null,
    38: null,
    40: null,
    42: null,
    sale: null,
  };


  constructor() {
    this.filtersGroup = new FormGroup({
      36: new FormControl(),
      38: new FormControl(),
      40: new FormControl(),
      42: new FormControl(),
      sale: new FormControl(),
    });

    this.filteredItems$ = this.filtersGroup.valueChanges.pipe(
      startWith(this.defaultFilters),
      map((controls: Filters) => {
        let items = this.items;
        const sizes = Object.keys(controls)
          .filter((control) => controls[control] && !control.startsWith('sale'))
          .map((size) => Number(size));

        const sale = controls.sale;

        if (sizes.length > 0) {
          items = items.filter((item) =>
            sizes.some((checkboxSize) => item['size'].some((itemSize) => itemSize === checkboxSize))
          );
        }

        if (sale) {
          items = items.filter((item) => item.sale === sale);
        }
        return items;
      })
    );
  }

  clearFilters() {
    this.filtersGroup.reset();
  }
}

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { delay, map, startWith, switchMap } from 'rxjs/operators';

export interface Item {
  id: number;
  color: string;
  price: number;
  sale: string;
  product: string;
  image: string;
  size: number[];
}

export interface Filters {
  min: number | null;
  max: number | null;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  loading = true;

  filteredItems$: Observable<Item[]>;
  filtersGroup: FormGroup;

  defaultFilters: Filters = {
    min: null,
    max: null,
  };

  constructor(private http: HttpClient) {
    this.filtersGroup = new FormGroup({
      min: new FormControl(),
      max: new FormControl(),
    });

    this.filteredItems$ = this.filtersGroup.valueChanges.pipe(
      startWith(this.defaultFilters),
      switchMap((filters: Filters) => {
        this.loading = true;
        return http.get<Item[]>('/assets/products.json').pipe(
          delay(600),
          map((data: Item[]) => {
            const { min, max } = filters;
            let items: Item[] = data;
            this.loading = false;
            if (min && max) {
              items = data.filter((item) => item['price'] >= min && item['price'] <= max);
              return items;
            }
            if (min) {
              items = data.filter((item) => item['price'] >= min);
              return items;
            }
            if (max) {
              items = data.filter((item) => item['price'] <= max);
              return items;
            }

            return items;
          })
        );
      })
    );
  }

  clearFilters() {
    this.filtersGroup.reset();
  }
}

[
{
  "id": 1,
  "category": "shirts",
  "name": "Fantasy T-shirt",
  "rating": 4,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": true,
  "size": ["34", "36", "40"],
  "condition": "new",
  "color": "blue",
  "price": 12.99,
  "keywords": ["t-shirt", "sweatshitrt"],
  "discount": 0,
  "gender": "male"
},
{
  "id": 2,
  "category": "shirts",
  "name": "Fantasy T-shirt",
  "rating": 5,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": true,
  "size": ["34", "36", "40", "44"],
  "condition": "new",
  "color": "red",
  "price": 12.99,
  "discount": 0,
  "gender": "male"
},
{
  "id": 3,
  "category": "shirts",
  "name": "Fantasy T-shirt",
  "rating": 3,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": true,
  "size": ["34", "36"],
  "condition": "new",
  "color": "grey",
  "price": 40.99,
  "discount": 10,
  "gender": "male"
},
{
  "id": 4,
  "category": "jackets",
  "name": "Denim Jacket",
  "rating": 5,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": true,
  "condition": "new",
  "color": "grey",
  "price": 40.99,
  "discount": 0,
  "gender": "unisex"
},
{
  "id": 5,
  "category": "jeans",
  "name": "Ripped jeans",
  "rating": 5,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/11.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": true,
  "size": ["34", "36", "38", "40"],
  "condition": "renewed",
  "color": "blue",
  "price": 20.99,
  "discount": 5,
  "gender": "female"
},
{
  "id": 6,
  "category": "jeans",
  "name": "Boyfriend jeans",
  "rating": 4,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/10.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": false,
  "size": ["34", "36", "38", "40"],
  "condition": "used",
  "color": "blue",
  "price": 20.99,
  "discount": 5,
  "gender": "female"
},
{
  "id": 7,
  "category": "shirts",
  "name": "Ripped sweatshirt",
  "rating": 4,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/7.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": true,
  "size": ["34", "36", "38", "40"],
  "condition": "collectible",
  "color": "white",
  "price": 29.99,
  "discount": 5,
  "gender": "female"
},
{
  "id": 8,
  "category": "shirts",
  "name": "Longsleeve",
  "rating": 4,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/8.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": true,
  "size": ["40"],
  "condition": "collectible",
  "color": "black",
  "price": 120.99,
  "discount": 0,
  "gender": "male"
},
{
  "id": 8,
  "category": "shirts",
  "name": "Stripped sweatshirt",
  "rating": 4,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/6.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": true,
  "size": ["40", "38", "36"],
  "condition": "new",
  "color": "white",
  "price": 32.99,
  "discount": 10,
  "gender": "female"
},
{
  "id": 9,
  "category": "trousers",
  "name": "Red chinos",
  "rating": 5,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/5.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": true,
  "size": ["40", "38", "36"],
  "condition": "new",
  "color": "red",
  "price": 62.99,
  "discount": 10,
  "gender": "female"
},
{
  "id": 10,
  "category": "coats",
  "name": "Camel coat",
  "rating": 5,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/4.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": true,
  "size": ["40", "38", "36"],
  "condition": "used",
  "color": "brown",
  "price": 62.99,
  "discount": 10,
  "gender": "female"
},
{
  "id": 11,
  "category": "jeans",
  "name": "Blue jeans",
  "rating": 5,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/3.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": true,
  "size": ["40", "38", "36"],
  "condition": "new",
  "color": "blue",
  "price": 42.99,
  "discount": 0,
  "gender": "female"
},
{
  "id": 12,
  "category": "shirts",
  "name": "Orange T-shirt",
  "rating": 3,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/3.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": true,
  "size": ["40", "38", "36"],
  "condition": "new",
  "color": "orange",
  "price": 12.99,
  "discount": 0,
  "gender": "female"
},
{
  "id": 13,
  "category": "skirts",
  "name": "Ballerina skirt",
  "rating": 4,
  "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/2.webp",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
  "available": true,
  "size": ["38", "36"],
  "condition": "collectible",
  "color": "white",
  "price": 12.99,
  "discount": 0,
  "gender": "female"
}
  ]

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith, tap } from 'rxjs/operators';
import { zoomInAnimation } from 'mdb-angular-ui-kit/animations';

export interface Item {
  id: number;
  color: string;
  price: number;
  sale: string;
  product: string;
  img: string;
  size: number[];
}

export interface Filters {
  color: string | null;
  sale: string | null;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [zoomInAnimation()],
})
export class AppComponent {
  animationState = false;

  items: Item[] = [
    {
      id: 1,
      color: 'black',
      price: 100,
      sale: 'no',
      product: 'Black Jeans Jacket',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
      size: [36, 40, 42],
    },
    {
      id: 2,
      color: 'black',
      price: 100,
      sale: 'no',
      product: 'Black Jeans Jacket',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
      size: [36, 38, 40, 42],
    },
    {
      id: 3,
      color: 'gray',
      price: 80,
      sale: 'yes',
      product: 'Gray Jumper',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
      size: [36, 38, 40],
    },
    {
      id: 4,
      color: 'gray',
      price: 80,
      sale: 'yes',
      product: 'Gray Jumper',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
      size: [40, 42],
    },
    {
      id: 5,
      color: 'red',
      price: 120,
      sale: 'yes',
      product: 'Red Hoodie',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
      size: [36, 40, 42],
    },
    {
      id: 6,
      color: 'blue',
      price: 90,
      sale: 'no',
      product: 'Blue Jeans Jacket',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
      size: [36, 38],
    },
  ];

  filteredItems$: Observable<Item[]>;
  filtersGroup: FormGroup;

  defaultFilters: Filters = {
    color: null,
    sale: null,
  };
  constructor() {
    this.filtersGroup = new FormGroup({
      color: new FormControl(),
      sale: new FormControl(),
    });

    this.filteredItems$ = this.filtersGroup.valueChanges.pipe(
      startWith(this.defaultFilters),
      map((filters: Filters) => {
        const { color, sale } = filters;
        let items = this.items;
        if (color) {
          items = items.filter((item) => item.color === color);
        }

        if (sale) {
          items = items.filter((item) => item.sale === sale);
        }

        return items;
      }),
      tap(() =>
        setTimeout(() => {
          this.animationState = !this.animationState;
        }, 0)
      )
    );
  }

  clearFilters() {
    this.filtersGroup.reset();
  }

  onAnimationDone() {
    this.animationState = false;
  }
}