在primeng Angular2中多选复选框自定义下拉列表

Question

My Question is pretty much similar to this question but in angular2.

I need to achieve some thing like this https://cdn.pbrd.co/images/8R7WhRUrq.png . Dropdown with custom html. Some thing like appending grid in dropdown. Is it possible to achieve a dropdown with multiple select checkbox dropdown with custom html & group by in primeng

Answer 1

According to Primeng Docs.

Custom Content

https://primefaces.org/primeng/showcase/#/dropdown

<p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}"> <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">{{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>

`import {SelectItem} from 'primeng/api';

export class MyModel {

cars: SelectItem[];

selectedCar: string;

constructor() {
    this.cars = [
        {label: 'Audi', value: 'Audi'},
        {label: 'BMW', value: 'BMW'},
        {label: 'Fiat', value: 'Fiat'},
        {label: 'Ford', value: 'Ford'},
        {label: 'Honda', value: 'Honda'},
        {label: 'Jaguar', value: 'Jaguar'},
        {label: 'Mercedes', value: 'Mercedes'},
        {label: 'Renault', value: 'Renault'},
        {label: 'VW', value: 'VW'},
        {label: 'Volvo', value: 'Volvo'},
    ];
}

}`