Skip to content

SortButton (Component)

A component with a list of properties to sort a list by. It can be used together with the DspSortBy pipe.


{string} sortKeyChange
EventEmitter when a user selected a sort property;
This is the selected key.

Name Type Description
sortProps Array An array of SortProp objects for the selection menu:
SortProp: { key: string, label: string }
position='left' (optional) string Optional position of the sort menu: right or left
icon='sort' (optional) string Default icon is "sort" from material design. But you can replace it with another one e.g. sort_by_alpha
sortKey string Set and get (two-way data binding) of current sort key

Example - Simple Example

HTML file

<dsp-sort-button [sortProps]="sortProps" [(sortKey)]="sortKey" [position]="'right'"></dsp-sort-button>

    <li *ngFor="let item of list | dspSortBy: sortKey">
        <span []="sortKey === 'prename'">{{item.prename}} </span>
        <span []="sortKey === 'lastname'">{{item.lastname}} </span>
        <span []="sortKey === 'creator'">{{item.creator}}</span>

Typescript file

sortProps: any = [
        key: 'prename',
        label: 'Prename'
        key: 'lastname',
        label: 'Last name'
        key: 'creator',
        label: 'Creator'

sortKey: string = 'creator';

list = [
        prename: 'Gaston',
        lastname: 'Lagaffe',
        creator: 'André Franquin'
        prename: 'Mickey',
        lastname: 'Mouse',
        creator: 'Walt Disney'
        prename: 'Donald',
        lastname: 'Duck',
        creator: 'Walt Disney'
        prename: 'Charlie',
        lastname: 'Brown',
        creator: 'Charles M. Schulz'


It's possible to set the position of the sort button to the right or left side with the property [position].

Last update: 2021-08-13