### File

`modules/productsListCmp/src/products-list.component.ts`

### Metadata

selector | `app-products-list`
styleUrls | `products-list.component.scss`
templateUrl | `products-list.component.html`

### Inputs

`categoryId` |

### Constructor

`constructor(dal: any, router: any, productService: any, route: any)`

### Methods

inc
`inc()`
Returns: `void`

dec
`dec()`
Returns: `void`

onSelect
`onSelect(id: any)`
Returns: `void`

getProducts
`getProducts()`
Returns: `void`

search
`search(productName: string)`
Returns: `void`

filter
`filter()`
Returns: `void`

getTotalPages
`getTotalPages()`
Returns: `void`

updateAttrs
`updateAttrs(newAttrs: any)`
Returns: `void`

updateTags
`updateTags(newTags: any)`
Returns: `void`

### Properties

attrs
`attrs: `any[]` </bcode>`

currentPage
`currentPage: `number` </bcode>`
Default value: `1`

currentPageStream
`currentPageStream: `any` </bcode>`

itemsOnPage
`itemsOnPage: `number` </bcode>`
Default value: `10`

products
`products: `any` </bcode>`

searchValue
`searchValue: `string` </bcode>`

searchValueStream
`searchValueStream: `any` </bcode>`

startProductId
`startProductId: `string` </bcode>`

tags
`tags: `any[]` </bcode>`

totalPages
`totalPages: `number` </bcode>`
Default value: `0`

    import { Params } from '@angular/router';
    import { ActivatedRoute } from '@angular/router';
    import { Component, OnInit, Inject, Input} from '@angular/core';
    import {Router} from '@angular/router';
    import {DbAbstractionLayer} from "@nodeart/dal";
    import {Subject} from 'rxjs/Subject';
    import {ProductService} from "@nodeart/productservice";
    @Component({
      selector: 'app-products-list',
      templateUrl: './products-list.component.html',
      styleUrls: ['./products-list.component.scss']
    })
    export class ProductsListComponent implements OnInit {

      products: any = [];
      searchValue: string;
      searchValueStream = new Subject<string>();
      startProductId : string ;
      currentPageStream = new Subject<number>();
      currentPage = 1;
      totalPages = 0;
      itemsOnPage = 10;
      attrs = [];
      tags = [];
      @Input() categoryId = "";

      constructor(private dal: DbAbstractionLayer,
                  private router: Router,
                  private productService: ProductService,
                  private route: ActivatedRoute) {
      }

      ngOnInit() {
        this.getProducts();
        this.searchValueStream.subscribe(productName => {
            this.getProducts();
          });
        this.route.params.forEach((params: Params) => {
          if(params['id']){
            this.categoryId = params['id'];
          }

          });
        this.getTotalPages();
        this.currentPageStream.subscribe(newPage => {
          this.getProducts();
        });
      }

      inc(){
        this.currentPageStream.next(++this.currentPage);
      }

      dec(){
        this.currentPageStream.next(--this.currentPage);
      }

      onSelect(id){
        this.router.navigate(['product', id]);
      }

      getProducts(){
        console.log(this.attrs);
        console.log(this.tags);
        this.productService
          .searchProducts(this.attrs, this.tags, this.itemsOnPage, (this.currentPage - 1) * this.itemsOnPage)
          .on('value', data =>{
          if(data.val()){
            this.products = data.val().map(item => {
              item['_source']['id'] = item['_id'];
              return item['_source'];
            });
            console.log(this.products);
          }
        });
      }

      search(productName: string){
        this.searchValueStream.next(productName);
      }

      filter(){
        this.currentPage = 1;
        this.getTotalPages();
        this.productService.filterProducts(this.attrs, this.tags, this.itemsOnPage, (this.currentPage - 1) * this.itemsOnPage)
          .on('value', data => {
            if (data.val()){
              if (data.val()['total'] == 0) {
                this.products = [];
              }else if (data.val()['hits']){
                this.products = data.val()['hits'].map(item => {
                  item['_source']['id'] = item['_id'];
                  return item['_source'];
                });
              }
              console.log(this.products);
            }
        })
      }

      getTotalPages(){
        this.productService.getTotalPages(this.attrs, this.tags).on('value', data => {
          if(data.val()){
            let items = data.val();
            this.totalPages = Math.ceil(items / this.itemsOnPage);
          }
        });
      }

      updateAttrs(newAttrs){
        this.attrs = newAttrs;
      }

      updateTags(newTags){
        this.tags = newTags;
      }
    }

# results matching ""

# No results matching ""