How do you sort price category with pipes using Angular 2?

Question

Below is my HTML file to sort price category but my Pipe does not quite work. Two objects in my products model are priceCategory: string, Price: Number --> and more: color, bra

Answer 1

How am I using bubble sort to sort price category in order?

I created a class: SearchField

export class SearchField {
    fieldName: string;  //Apple, Samsung, Memory, color, et..
    products: Product[];  //the products in the field; 
    selected: boolean;    //if this field is selected, shows the products in the product list.
    constructor(fieldName: string) {
        this.fieldName = fieldName;
        this.products = [];
        this.selected = false;
    }
    addProduct(product: Product) {
        this.products.push(product);
    }
    getProducts() {
        return this.products;
    }
    // $0-100 (3) : tells shopper there are 3 products that belong to $0-100. If this field is selected, 3 items appear in product list. 
    getCount() {
        return this.products.length;
    }
}

To get a better understanding of my app: The Filter results are displayed on the left while product search/found takes most of the space on the center. Products varies: toys, video-games, shoes, etc..

FILTER RESULTS              Iphone, $700, white, AT&T, 2GB, etc.
Title: Asc, Desc            Pixel, $700, white, Verizon, 2GB, etc..
Price: Asc, Desc            Iphone SE, $550, black, AT&T, 1GB, etc..
Price
  $500-600(1)
  $700-800(2)
Brand
  Apple(2)
  Google(1) 

Before I implemented bubble sort, I stored all the search items in an array in my service. For price category: priceCategories: SearchField[];

getPriceCategoryQueries() {
    for(let i=0; i this.priceCategories[i+1].products[0].price) {
            temp = priceCategories[i];
            this.priceCategories[i] = this.priceCategories[i+1];
            this.priceCategories[i+1] = temp;
            swapped = true;
         }
     }
}        

Conclusion: Pipes are great. They have the same code for brandCategory, Color, etc, but the pipe I am using does not work for priceCategory, and sizeCategory: size 2-5 comes before size 10 - 15. That is the reason why I am using bubble sort. If I help you in anyway, please vote for my "OWN ANSWER" for my application.