Angular OrderList

Angular OrderList is used to managed the order of a collection.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {OrderListModule} from 'primeng/orderlist';

Getting Started

OrderList requires an array as its value and a ng-template for its content where each item in the array can be accessed inside the ng-template using a local ng-template variable.

<p-orderList [value]="cars">
    <ng-template let-car pTemplate="item">
        <div>
            <img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48">
            <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
        </div>
    </ng-template>
</p-orderList>

export class MyComponent {

    cars: Car[];

    ngOnInit() {
        this.cars = //initialize cars
    }
}

Multiple Selection

Multiple items can either be selected using metaKey or toggled individually depending on the value of metaKeySelection property value which is true by default. On touch enabled devices metaKeySelection is turned off automatically.

Selection Binding

The optional selection property is provided in case you'd like to a two-way binding to the selections.

<p-orderList [value]="cars" [(selection)]="selectedCars">
    <ng-template let-car pTemplate="item">
        <div>
            <img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48">
            <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
        </div>
    </ng-template>
</p-orderList>

export class MyComponent {

    cars: Car[];

    selectedCars: Car[];

    ngOnInit() {
        this.cars = //initialize cars
    }
}

Filtering

Items can be filtered using an input field by enabling the filterBy property that specifies the fields to use in filtering.

<p-orderList [value]="cars" filterBy="brand"></p-orderList>

Multiple fields can be defines using a comma separates list.

<p-orderList [value]="cars" filterBy="brand,color,address.city"></p-orderList>

DragDrop

Items can be reordered using drag and drop by enabling dragdrop property.

<p-orderList [value]="cars" dragdrop="true">

Buttons Location

Buttons that control the ordering are displayed at the left side of the list by default, controlsPosition property enables customizing the location. Currently right is the available alternative.

<p-orderList [value]="cars" controlsPosition="right">

Theming

OrderList supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG OrderList showcase for demos and documentation.