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">
          <div class="ui-grid ui-grid-responsive ui-fluid">
            <div class="ui-grid-row">
              <div class="ui-grid-col-2">Engine: </div>
              <div class="ui-grid-col-10">{{browser.engine}}</div>
            </div>
            <div class="ui-grid-row">
              <div class="ui-grid-col-2">Browser: </div>
              <div class="ui-grid-col-10">{{browser.browser}}</div>
            </div>
            <div class="ui-grid-row">
              <div class="ui-grid-col-2">Platform: </div>
              <div class="ui-grid-col-10">{{browser.platform}}</div>
            </div>
            <div class="ui-grid-row">
              <div class="ui-grid-col-2">Version: </div>
              <div class="ui-grid-col-10">{{browser.version}}</div>
            </div>
            <div class="ui-grid-row">
              <div class="ui-grid-col-2">Grade: </div>
              <div class="ui-grid-col-10">{{browser.grade}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ng-template>
</p-dataList>

The list of browser details needs to be retrieved from external services. In this case, the BrowserService service will be injected into the component class to retrieve the browser information. We used observables to get the data using the HTTP module. The list data will be retrieved on page load as follows:

basicBrowsers: Browser[];

constructor(private browserService: BrowserService) { }

ngOnInit() {
  this.browserService.getBrowsers().subscribe(
    (browsers:any) => this.basicBrowsers = browsers.slice(0,4));
}

We limited the number of records to five for demonstration purposes. The following screenshot shows a snapshot result of the DataList component in a list format as an example:

The preceding snapshot just displays the data in a tabular format. In the next section, you can find many more features to make a data list a powerful component.