CODEWITHSUNDEEP
angularlistboxprimeng
Shilpi Jaiswal
Shilpi Jaiswal

Reputation: 1188

Primeng list-box check boxes checked or options selected

I am using Primeng with Angular 7. I am facing problem in showing already selected checkbox checked.

Below I'm showing the listbox but checkboxes are not checked. Can anybody help me with it? What am I missing?

I am using p-listbox under p-dialog

<p-dialog
    header="Assign Feature"
    [(visible)]="displayDialog"
    [responsive]="true"
    showEffect="fade"
    [modal]="true"
    [draggable]="true"
    [responsive]="true"
    [contentStyle]="{ 'max-height': '320px', 'max-width': '400px' }"
    [positionTop]="100"
>
    <p-listbox
        [options]="sourcelist"
        multiple="multiple"
        checkbox="checkbox"
        filter="filter"
        optionLabel="name"
        [(ngModel)]="selectedPermission"
        [listStyle]="{ 'max-height': '200px' }"
    ></p-listbox>

    <p>
        Selected Permissions:
        <span
            *ngFor="let c of selectedPermission"
            style="margin-right: 10px"
            >{{ c.name }}</span
        >
    </p>
</p-dialog>

Please refer to the screenshot:

enter image description here

Upvotes: 2

Views: 4879

Answers (1)

Paresh Gami
Paresh Gami

Reputation: 4782

In selected items, You have to pass whole object not single string for making checkbox selected.

html

<p-listbox
    [options]="sourcelist"
    multiple="multiple"
    checkbox="checkbox"
    filter="filter"
    optionLabel="name"
    [(ngModel)]="selectedPermission"
    [listStyle]="{ 'max-height': '200px' }"
    ></p-listbox>

{{selectedPermission | json}}

ts

export class AppComponent {
    sourcelist = [
        { name: 'Update', value: { id: 1, name: 'Uodate'} },
        { name: 'Delete', value: { id: 2, name: 'Delete'} },
        { name: 'Show', value: { id: 3, name: 'Show' } }
    ];

    selectedPermission = [];

    constructor() {
        this.selectedPermission.push(this.sourcelist[1]);
    }
}

Upvotes: 1

Related Questions