Customized Dropdown

The Dropdown component is more powerful with customized content over the default label text of an item. The filter property is used to filter all the possible options through an input in an overlay. A customized example of a Dropdown with the list of options representing a country name and a flag image would be as follows:

<p-dropdown [options]="countries" [(ngModel)]="selectedCountry"  
  [styleClass]="dropdown-width" filter="filter">
  <ng-template let-country pTemplate="item">
    <div class="ui-helper-clearfix" class="template-border">
      <img src="/assets/data/images/country/
        {{country.code.toLowerCase()}}.png" class="country-image"/>
      <div class="country-text">{{country.name}}</div>
    </div>
  </ng-template>
</p-dropdown>

The dropdown will be displayed with the custom content and filtering as shown...