import { Component } from "@angular/core";
import { ProductsService } from "../index";
@Component({
moduleId: module.id,
selector: "my-table",
templateUrl: "myTable.component.html",
styleUrls: ["myTable.component.css"],
providers: [ProductsService],
inputs: ["rows"]
})
export class MyTableComponent {
rows: number;
info = [];
categories = {
category1: [],
category2: [],
category3: []
};
newProductName: string = "Default Name";
newProductPrice: number = 0;
constructor(private products: ProductsService) {}
getCategory(product) {
var result;
if (product.price <= 300) {
result = 'Category 1';
this.categories.category1.push(product);
} else if (product.price <= 700 && product.price > 300) {
result = 'Category 2';
this.categories.category2.push(product);
} else if(product.price > 700) {
result = 'Category 3';
this.categories.category3.push(product);
}
return result;
}
sort(cat) {
let that = this;
switch(cat) {
case '*':
sorting(this.info);
break;
case 1:
sorting(this.categories.category1);
break;
case 2:
sorting(this.categories.category2);
break;
case 3:
sorting(this.categories.category3);
break;
}
function sorting(category) {
that.info.map(function(product) {
product.hiddenByCategory = true;
});
category.map(function(product) {
product.hiddenByCategory = false;
});
}
}
addProduct() {
let product = {
id: this.info.length + 1,
name: this.newProductName,
price: this.newProductPrice
};
this.info.push(product);
}
ngOnInit() {
this.info = this.products.products.slice(0, this.rows);
}
}
import { Injectable } from '@angular/core';
@Injectable()
export class ProductsService {
products = [
{ id: 1, name: "product 1 ", price: 100 },
{ id: 2, name: "product 2 ", price: 200 },
{ id: 3, name: "product 3 ", price: 300 },
{ id: 4, name: "product 4 ", price: 400 },
{ id: 5, name: "product 5 ", price: 500 },
{ id: 6, name: "product 6 ", price: 600 },
{ id: 7, name: "product 7 ", price: 700 },
{ id: 8, name: "product 8 ", price: 800 },
{ id: 9, name: "product 9 ", price: 900 },
{ id: 10, name: "product 10", price: 1000 }
];
addProduct(newProduct) {
this.products.push(newProduct);
}
}