how to show custom data selected' optionLabel dropdown primeng

user_10791652 0
Viewed 823

I want to show selected custom data on dropdown in primeng show selected data same as shown on dropdown list Please see both the images

<div class="p-grid" *ngIf="deleteUser" style="place-content :center">
                        <div class="p-col-12 p-md-6">
                            <div class="card" style="background-color: var(--secondary-backgound-color);">
                                <div class="p-fluid p-formgrid p-grid">
                                    <div class="p-field p-col-12">
                                        <label for="points">CURRENT USERS</label>
                                        <p-dropdown [options]="sourceEmployees" placeholder="Select" optionLabel="firstName"
                                            class="dropdown-width" [showClear]="true" formControlName="deleteCurrentUsers" [(ngModel)]="selectedDeletedUsers"
                                            [ngClass]="{ 'ng-dirty': submitted && formFieldManageUsers.deleteCurrentUsers.errors }">
                                            <ng-template pTemplate="selectedDeletedUsers">
                                                <div class="item-value" *ngIf="selectedDeletedUsers">
                                                    <div>{{selectedDeletedUsers.firstName}} {{selectedDeletedUsers.lastName}} - {{(selectedDeletedUsers.isActive ? 'ACTIVE' : 'INACTIVE')}}</div>
                                                </div>
                                            </ng-template>
                                            <ng-template let-users pTemplate="sourceEmployees">
                                                <div class="item">
                                                    <div>{{users.firstName}} {{users.lastName}} - {{(users.isActive ? 'ACTIVE' : 'INACTIVE')}}</div>
                                                </div>
                                            </ng-template>
                                        </p-dropdown>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

Show custom list on dropdown

show custom selected data same as list data show

angular10 primeng angular
1 Answers

I was having this same problem now and it manages to solve it. Comparing what I did with your code:

  • The pTemplate="selectedDeletedUsers" I changed to pTemplate="selectedItem";

  • I changed your class="item-value" to class="item" and removed the *ngIf="selectedDeletedUsers" because it will fall into this condition only if you have something selected (at least for me it was also giving problems with an ngIf in the same place);

  • I changed your pTemplate="sourceEmployees" to pTemplate="item" just to be safe.

Final result:

<div class="p-grid" *ngIf="deleteUser" style="place-content :center">
  <div class="p-col-12 p-md-6">
      <div class="card" style="background-color: var(--secondary-backgound-color);">
          <div class="p-fluid p-formgrid p-grid">
              <div class="p-field p-col-12">
                  <label for="points">CURRENT USERS</label>

                  <p-dropdown [options]="sourceEmployees" placeholder="Select" optionLabel="firstName"
                      class="dropdown-width" [showClear]="true" formControlName="deleteCurrentUsers" [(ngModel)]="selectedDeletedUsers"
                      [ngClass]="{ 'ng-dirty': submitted && formFieldManageUsers.deleteCurrentUsers.errors }">

                      <ng-template pTemplate="selectedItem">
                          <div class="item">
                              <div>{{selectedDeletedUsers.firstName}} {{selectedDeletedUsers.lastName}} - {{(selectedDeletedUsers.isActive ? 'ACTIVE' : 'INACTIVE')}}</div>
                          </div>
                      </ng-template>
                      
                      <ng-template let-users pTemplate="item">
                          <div class="item">
                              <div>{{users.firstName}} {{users.lastName}} - {{(users.isActive ? 'ACTIVE' : 'INACTIVE')}}</div>
                          </div>
                      </ng-template>
                  </p-dropdown>
              </div>
          </div>
      </div>
  </div>
</div>

As it has been so long since you posted the question, I believe you have already solved the problem. But I hope it helps in some way.

user_129955660
Related