### 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` |
Defined in src/app/home/sidebar/taxons/taxons.component.ts:14

### Constructor

`constructor(store: Store, actions: SearchActions, ref: ChangeDetectorRef)`
Defined in src/app/home/sidebar/taxons/taxons.component.ts:16

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/home/sidebar/taxons/taxons.component.ts:27
Returns: `void`

isChecked
`isChecked(taxon: any)`
Defined in src/app/home/sidebar/taxons/taxons.component.ts:30
Returns: `void`

taxonSelected
`taxonSelected(taxon: any, checked: any)`
Defined in src/app/home/sidebar/taxons/taxons.component.ts:40
Returns: `void`

### Properties

searchFilters$
`searchFilters$: `Observable<any>``
Defined in src/app/home/sidebar/taxons/taxons.component.ts:15

selectedFilters
`selectedFilters: `any[]``
Defined in src/app/home/sidebar/taxons/taxons.component.ts:16

    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 ""