[FIXED] Angular primeNg dropdown


I have a dropdown on each line of a table row and every time I select one option from dropdown the selected value is updated with same value on rest dropdowns:

my html code:

 <ng-template pTemplate="body" let-user>
               current user permission: {{user.Permission}}
              <p-dropdown [options]="PermissionOptions" [(ngModel)]="permissionVal" placeholder="change..." optionLabel="name">


interface PermissionType {
  name: string,

PermissionOptions1: PermissionType[];
permissionVal1: PermissionType;

  this.PermissionOptions1 = [
    {name: FolderPermissionEnum.WRITE},
    {name: FolderPermissionEnum.READ},


The problem may be spotted on variable permissionVal that receive the selected value from dropdown, and right now that value is common for all dropdowns on the table. If somehow I can change that variable permissionVal to be an array maybe I could solve the problem but I don’t know how I can do it or call it on HTML.


Instead of using the two-way binding syntax [(ngModel)], you can split it into [ngModel] property binding and (ngModelChange) event binding syntax, which will give you more control over managing data as per your use case.

Since you have a dropdown on each line of a table row, I assume there would be a way for you to get hold of row number. Suppose row_num represents the row number, then you can have logic as below:

<!-- html file -->
<p-dropdown [options]="PermissionOptions" [ngModel]="permissionValList[row_num]" 
    (ngModelChange)="updatePermissionValList($event, row_num)" 
    placeholder="change..." optionLabel="name">
/* ts file */
permissionValList: PermissionType[] = [];  // or can define type as --> {[key: number]: PermissionType} with default value as {}

updatePermissionValList(event: PermissionType, row_num: number) {
    this.permissionValList[row_num] = event;


[(ngModel)]="permissionValList[row_num]" should be sufficient in your case, and no need of adding any method for simple assignment, as two-way binding does the same thing.

Answered By – Siddhant

Answer Checked By – Timothy Miller (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published