The OrderList component is used to sort a collection of items in different directions (up and down). The component requires an array type variable to store its value and ng-template to display content of an array of items. Each item will be accessed inside the ng-template template using a local ng-template variable. When the position of an item changes, the backend array is also updated to store the latest item order.

A basic example of the OrderList component with country information would be written as follows:

<p-orderList [value]="countries"  header="Favourite countries" >
  <ng-template let-country pTemplate="item">
    <div class="ui-helper-clearfix">
      <img src="/assets/data/images/country/
        {{country.code.toLowerCase()}}.png" />
      <span class="content-format">
        {{country.flag}} {{country.name}}({{country.dial_code}})
      </span>
    </div>
  </ng-template>
</p-orderList>

In the component class, let's define a countries list to display the collection of items. The country service needs to be injected to access the country information from the external resources or datasources as shown here:

countries: Country[];

constructor(private countryService: CountryService) { }

ngOnInit() {
  this.countryService.getCountries().subscribe((countries: Country[]) =>
  {
    this.countries = countries;
  });
}

By default, the list panel is available with default width and height properties. But this can be customized using the listStyle property. The following screenshot shows a snapshot result of the initial order list as an example:

The OrderList component provides three different event callbacks as mentioned here:

The component can be customized from it's default behavior in different ways as mentioned here:

• The header can be customized using the header property
• The responsive property (responsive="true") is used to apply responsive behavior, which adjusts the button controls based on the screen size
• The default multiple selection is prevented (with the help of the Meta key) by disabling the metaKeySelection attribute (metaKeySelection="false")

The following screenshot shows a snapshot result of a countries list with the earlier mentioned customization as an example:

In the preceding snapshot, you can observe that controls appears at the top due to its responsive feature (responsive="true"). We can also observe that the panel width has been adjusted based on viewport size (using the listStyle property).

PrimeNG 4.1 version supports filtering and drag and drop features as new additions. The filter feature can be applied for single field and multiple fields using the filterBy property similar to the DataTable component. For example, the multi filtering feature on countries data would be as follows:

<p-orderList [value]="countries" filterBy="name, code">
 ...
</p-orderList>

The newer 4.1 version also supports a drag-and-drop feature to reorder items by enabling the dragdrop property. It also provides the dragdropScope property, which holds the unique key to avoid conflicts with other drag-and-drop events. The drag-and-drop feature example would be as follows:

<p-orderList [value]="countries" [dragdrop]="true" dragdropScope="name">
  ...
</p-orderList>