File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-epd-visualization-product-filter |
| templateUrl |
./visual-picking-product-filter.component.html |
Index
Properties
|
|
|
Inputs
|
|
|
Accessors
|
|
|
|
iconTypes
|
Default value : ICON_TYPE
|
|
|
Accessors
|
filter
|
getfilter()
|
|
|
setfilter(filter: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| filter |
string
|
No
|
|
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ICON_TYPE } from '@spartacus/storefront';
import { VisualPickingProductFilterService } from './visual-picking-product-filter.service';
@Component({
selector: 'cx-epd-visualization-product-filter',
templateUrl: './visual-picking-product-filter.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class VisualPickingProductFilterComponent {
constructor(
protected visualPickingProductFilterService: VisualPickingProductFilterService
) {}
/**
* The filter input value.
*/
@Input()
set filter(filter: string) {
this.visualPickingProductFilterService.filter = filter;
}
get filter() {
return this.visualPickingProductFilterService.filter;
}
iconTypes = ICON_TYPE;
}
<div class="form-group search-wrapper">
<input
type="text"
[(ngModel)]="filter"
class="form-control"
placeholder="{{
'epdVisualization.visualPicking.visualPickingProductFilter.input.placeholder'
| cxTranslate
}}"
/>
<cx-icon
[type]="iconTypes.SEARCH"
[attr.aria-label]="
'epdVisualization.visualPicking.visualPickingProductFilter.searchButton.label'
| cxTranslate
"
class="search"
[hidden]="filter.length > 0"
></cx-icon>
<cx-icon
[type]="iconTypes.RESET"
[attr.aria-label]="
'epdVisualization.visualPicking.visualPickingProductFilter.resetButton.label'
| cxTranslate
"
(mousedown)="filter = ''"
(keydown.enter)="filter = ''"
[hidden]="filter.length == 0"
class="reset"
tabindex="0"
></cx-icon>
</div>
Legend
Html element with directive