File
Implements
Metadata
selector |
app-taxons |
styleUrls |
taxons.component.scss |
templateUrl |
./taxons.component.html |
Methods
ngOnInit
|
ngOnInit()
|
|
Returns: void
|
isChecked
|
isChecked(taxon: any)
|
|
Returns: void
|
taxonSelected
|
taxonSelected(taxon: any, checked: any)
|
|
Returns: void
|
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 with directive