primeNg picklist alternative with listbox in angular

Pick-list angular PrimeNg alternative using ListboxModule

View demo Video

Hi! we had solution for how to remove buttons from picklist in PrimeNg. Unfortunately PrimeNg picklist not having options to remove left and right side of buttons. So, here the solutions we provide.

Let’s see step by step from installation

npm install primeng primeicons –save

After install the packages of primeng, add styles to angular.json file.

"styles": [
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/nova-light/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "src/styles.css"
            ],

After adding the style. Import the component we using. Here we use ListboxModule from Primeng/listbox.

import {ListboxModule} from 'primeng/listbox';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ListboxModule
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now lets jump into integration of custom picklist via listbox in PrimeNg

app.component.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <p-listbox [options]="users" filter="filter" multiple="true" checkbox="true"
            [style]="{'width':'100%'}" [listStyle]="{'max-height': '200px'}" [metaKeySelection]="false"
            [(ngModel)]="selectedUserList"></p-listbox>
        </div>
        <div class="col-md-2">
            <div class="my-2 ml-3"><i class="pi pi-angle-double-right clickable"
                (click)="moveUserToGroupMember()"></i></div>
            <div class="my-2 ml-3"><i class="pi pi-angle-double-left clickable" 
                (click)="moveGroupToUser()"></i></div>
        </div>
        <div class="col-md-3">
            <p-listbox [options]="groupUserList" filter="filter" multiple="true" checkbox="true"
            [style]="{'width':'100%'}" [listStyle]="{'max-height': '200px'}" [metaKeySelection]="false"
            [(ngModel)]="selectedGroupUsersList"></p-listbox>
        </div>
    </div>
</div>

I am using bootstrap for styling. If you don’t know how to import bootstrap to your app. See this link.

Now very interesting part. our custom picklist operations and functions.

app.component.ts


export class AppComponent {
public users = [];
public groupUserList = [];
public selectedUserList:any;
public selectedGroupUsersList:any;
constructor AppComponent(){
this.users = [
    { label: 'Ganesh', value: '3' },
    { label: 'John', value: '1' },
    { label: 'Joshua', value: '2' },


  ];
  this.groupUserList = [
    { label: 'Vetri', value: '5' },
    { label: 'shiva', value: '6' },
  ];
};


  moveUserToGroupMember() {
    this.users.forEach((elem, index) => {
      this.selectedUserList.forEach((selUser, indexes) => {
        if (selUser === elem.value) {
          this.groupUserList.push(elem);
          setTimeout(() => {
            this.removeByAttr(this.users, 'value', selUser);
          }, 500);
        }
      });
    });
  }
  moveGroupToUser() {
    this.groupUserList.forEach((elem, index) => {
      this.selectedGroupUsersList.forEach((selUser, indexes) => {
        if (selUser === elem.value) {
          this.users.unshift(elem);
          setTimeout(() => {
            this.removeByAttr(this.groupUserList, 'value', selUser);
          }, 500);
        }
      });
    });
  }

  removeByAttr = (arr, attr, value) => {
    let i = arr.length;
    while (i--) {
      if (arr[i]
        && arr[i].hasOwnProperty(attr)
        && (this.users.length > 0 && arr[i][attr] === value)) {

        arr.splice(i, 1);

      }
    }
    return arr;
  }

}

You can get selected Users from selectedUserList:any and selectedGroupUserList:any. That’s it now you can able to move users from one list to another list. Hope it will help to you. Further queries below in comment section. Have a great day!.

Leave a Reply

Your email address will not be published. Required fields are marked *