Listing data with DataList

The DataList component is used to display the data in a list layout. It requires a collection of items as its value and ng-template to display content where each item can be accessed using a local template variable. This template also provides an index of each item using a variable represented by the let-i expression. A basic example of the DataList component with all browser details to display in a list format would be written as follows:

<p-dataList [value]="basicBrowsers">
  <ng-template let-browser pTemplate="item">
    <div class="ui-grid ui-grid-responsive ui-fluid" 
      class="content-layout">
      <div class="ui-grid-row">
        <div class="ui-grid-col-3">
          <img src="/assets/data/images/{{browser.code}}.png" 
            width="100" height="80"/>
        </div>
        <div class="ui-grid-col-9">
   ...