projects/storefrontlib/shared/components/list-navigation/sorting/sorting.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | cx-sorting |
| templateUrl | ./sorting.component.html |
Properties |
Methods |
Inputs |
Outputs |
Accessors |
constructor()
|
| placeholder | |
Type : string
|
|
| selectedOption | |
Type : string
|
|
| sortLabels | |
Type : literal type
|
|
| sortOptions | |
Type : SortModel[]
|
|
| sortListEvent | |
Type : EventEmitter<string>
|
|
| sortList | ||||||
sortList(sortCode: string)
|
||||||
|
Parameters :
Returns :
void
|
| placeholder |
Type : string
|
Decorators :
@Input()
|
| selectedOption |
Type : string
|
Decorators :
@Input()
|
| sortLabels |
Type : literal type
|
Decorators :
@Input()
|
| sortListEvent |
Type : EventEmitter<string>
|
Decorators :
@Output()
|
| sortOptions |
Type : SortModel[]
|
Decorators :
@Input()
|
| selectedLabel |
getselectedLabel()
|
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
Output,
} from '@angular/core';
import { SortModel } from '@spartacus/core';
@Component({
selector: 'cx-sorting',
templateUrl: './sorting.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SortingComponent {
@Input()
sortOptions: SortModel[];
@Input()
selectedOption: string;
@Input()
placeholder: string;
@Input()
sortLabels: { [code: string]: string };
@Output()
sortListEvent: EventEmitter<string>;
constructor() {
this.sortListEvent = new EventEmitter<string>();
}
sortList(sortCode: string): void {
this.sortListEvent.emit(sortCode);
}
get selectedLabel() {
return (
this.sortOptions?.find((sort) => sort.code === this.selectedOption)
?.name ?? this.sortLabels?.[this.selectedOption]
);
}
}
<ng-select
[searchable]="false"
[clearable]="false"
placeholder="{{ placeholder }}"
(change)="sortList($event)"
[ngModel]="selectedOption"
[attr.aria-label]="selectedLabel || placeholder"
>
<ng-option *ngFor="let sort of sortOptions" [value]="sort.code">{{
sort.name ? sort.name : sortLabels ? sortLabels[sort.code] : ''
}}</ng-option>
</ng-select>