File

src/app/home/sidebar/taxons/taxons.component.ts

Implements

OnInit

Metadata

selector app-taxons
styleUrls taxons.component.scss
templateUrl ./taxons.component.html

Inputs

taxonomies

Constructor

constructor(store: Store, actions: SearchActions, ref: ChangeDetectorRef)

Methods

ngOnInit
ngOnInit()
Returns: void
isChecked
isChecked(taxon: any)
Returns: void
taxonSelected
taxonSelected(taxon: any, checked: any)
Returns: void

Properties

searchFilters$
searchFilters$: Observable<any>
selectedFilters
selectedFilters: any[]
import { SearchActions } from './../../reducers/search.actions';
import { getFilters } from './../../reducers/selectors';
import { Observable } from 'rxjs/Observable';
import { Store } from '@ngrx/store';
import { AppState } from './../../../interfaces';
import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-taxons',
  templateUrl: './taxons.component.html',
  styleUrls: ['./taxons.component.scss']
})
export class TaxonsComponent implements OnInit {
  @Input() taxonomies;
  searchFilters$: Observable<any>;
  selectedFilters = [];

  constructor(private store: Store<AppState>, 
    private actions: SearchActions,
    private ref: ChangeDetectorRef) {
    this.searchFilters$ = this.store.select(getFilters);
    this.searchFilters$.subscribe(data => {
      this.selectedFilters = data;
    });
  }

  ngOnInit() {
  }

  isChecked(taxon) {
    let result = false;
    this.selectedFilters.forEach((filter) => {
      if (filter.id === taxon.id) {
        result = true;
      }
    });
    return result;
  }

  taxonSelected(taxon, checked) {
    if (checked) {
      this.store.dispatch(this.actions.addFilter(taxon));
    } else {
      this.store.dispatch(this.actions.removeFilter(taxon));
    }
  }
}
<h4 class="heading">Category</h4>
<div class="filter-box">
  <ul class="taxonomy" *ngFor="let taxonomy of taxonomies">
    <li *ngFor="let taxon of taxonomy.root.taxons" class="filter"> 
      <label class="vertical-filters-label common-customCheckbox">  
        <input type="checkbox" [checked]="isChecked(taxon)" (click)="taxonSelected(taxon, $event.target.checked)">  {{taxon.name}}
        <div class="common-checkboxIndicator" ></div>
      </label>
    </li>
  </ul>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""