Listing data with OrderList

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