Angular 2 - user input in primeng list
Please take a look at this issue.
Assumptions:
The default primeng p-listbox uses a dictionary as shown below:
let dict = [{
label: 'some label',
value: 'some value'
}]
I would like to use my own dictionary as "parameters" of a primeng component
Code
I would like to expose my custom dictionary as an element using the dataKey property and templates:
let dict = [{
id: 1,
name: 'name'
}]
I know how to replace "label" with templates, but replacing "value" with dataKey property does n't work:
<p-listbox dataKey="id" [style]="{'width':'100%'}" [options]="dict" multiple="multiple" [(ngModel)]="selected" checkbox="checkbox" filter="filter">
<template let-item pTemplate="item">
{{item.name}}
</template>
</p-listbox>
Hello
+3
source to share
1 answer
I had the same problem a few weeks ago and created this feed below to convert an array of any length to a PrimeNg SelectItem array. Just pipe through your array and specify which fields you want to use as value and label.
import { Pipe, PipeTransform } from '@angular/core';
import { SelectItem } from 'primeng/primeng';
/*
* Converts array of objects to a format compatible with PrimeNG Dropdown component
* Usage:
* array | formatSelectItem:'Description':'Key'"
* Example:
* dict[{id: 1, name: 'name'}] | formatSelectItem:'id':'name'
* formats to: [{ value: '1' , label: 'name'}]
*/
@Pipe({
name: 'formatSelectItem'
})
export class FormatSelectItemPipe implements PipeTransform {
transform(value: any[], valueProperty: string, labelProperty: string): SelectItem[] {
if (value) {
return value.map(function (item) {
return {
value: item[valueProperty],
label: item[labelProperty]
};
});
}
}
}
You would use it like: -
<p-listbox dataKey="id" [style]="{'width':'100%'}" [options]="dict | formatSelectItem:'id':'name'" multiple="multiple" [(ngModel)]="selected" checkbox="checkbox" filter="filter">
<template let-item pTemplate="item">
{{item.name}}
</template>
</p-listbox>
+2
source to share