Search code examples
angularprimeng

Prime NG - Dropdown With Icons

Can an icon be placed on each item in a drop-down menu, if the options on it contain the name of the icon and the name of the item?

this code of Prime NG is not working for me: 

<p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" filter="true">
    <ng-template let-item pTemplate="selectedItem">
        <img src="assets/showcase/images/demo/car/{{item.label}}.png" style="width:16px;vertical-align:middle" />
        <span style="vertical-align:middle; margin-left: .5em">{{item.label}}</span>
    </ng-template>
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
            <img src="assets/showcase/images/demo/car/{{car.label}}.png" style="width:24px;position:absolute;top:1px;left:5px"/>
            <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
        </div>
    </ng-template>
</p-dropdown>

My options for dropdown:

{  
   "id":17,     
   "configurationItem":{  
       "id":18,
       "icon":"ui-icon-view-list",
       "name":"View-List",         
    },     
}

I want show the name and value of "icon" in a 

<span class="configurationItem.icon">

Solution

  • Yes it's possible, you can display either only the icon or bothe icon and value of your item.

    First make sure that you are using primeNG v5 or up.

    <p-dropdown [options]="listItems" [(ngModel)]="selectedItem" >
     <ng-template let-item pTemplate="selectedItem">
         <i class="{{item.label}}"></i>
     </ng-template>
     <ng-template let-object pTemplate="item">
         <i class="{{object.label}}"></i>
     </ng-template>
</p-dropdown>


listItems: SelectItem[];
this.listItems = [{label: 'fa fa-user', value: 'v1'}, {label: 'fa fa-user-cog', value: 'v2'}];

    Make sure that you are using primeNg.SelectItem for your list of items.