SortButton (Component)

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

Parameters

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

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

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'
    }
];

Optional

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