Questions tagged primeng-dropdowns

Explore the latest questions and answers asked by our top developers.

How to add extra custom button in primng dropdown box Angular

Im using primeng for Angular UI component library, and i want to know how to add extra custom button in primng dropdown box (not in its dialog box). ex:- In the spot as shown in img Source: Angular Questions

By Nishan
Published
Categorized as angular, primeng, primeng-dropdowns Tagged , ,

how to set two value in one optionLabel? in Angular PrimeNG

I want to set two values in one label. As an example, if I open dropdown it should show as "value1 value2" in one line with space. value1 and value2 data getting from the database. I tried using the below method but it has not worked. <p-dropdown [options]="divitionArr" name="business_divition" [(ngModel)]="project.business_divition" optionLabel="{‘first_name’,’last_name’}" optionValue="divition" #diviSel="ngModel"></p-dropdown> Source: Angular […]

By Damith Asanka
Published
Categorized as angular, primeng, primeng-dropdowns Tagged , ,

Angular – Dropdown validation – Validation is shown before the mouseup event

I’m using reactive forms for implementing validation behavior. I have a problem with the validation of a dropdown component. The validation is shown before the mouseup event (The problem (yt link): Dropdown Validation) .html <div class="col-md-8"> <p-dropdown id="regionId" [required]="true" formControlName="selectedRegion" placeholder="Select region (required)" [options]="regions" optionLabel="name" [ngClass]="{‘ng-invalid ng-dirty is-invalid’ : (equipmentForm.get(‘selectedRegion’).touched || equipmentForm.get(‘selectedRegion’).dirty) && !equipmentForm.get(‘selectedRegion’).valid }"> […]

How to create a dropdown as language selector? Angular Primeng

I want to create a dropdown using angular PrimeNG as my web page language selector. I already create using angular material but this time I want to create using PrimeNG. toolbar.component.html <p-dropdown [options]="lang" [(ngModel)]="selectedLang" optionLabel="name" optionValue="code" (change)="changeLang(‘code’)"></p-dropdown> toolbar.component.ts import { Component, OnInit } from ‘@angular/core’; interface Language { name: string, code: string } @Component({ selector: […]

disable primeng p-multiselect options using arbitrary objects in angular 6

I am using primeng v6.1.7 p-multiSelect with angular 6. I want to disable some options in multiselect dropdown. This should be achieved using arbitraty objects and NOT SelectItem. created stackbliz demo. Want solution for Scenario 2. stackbliz demo Source: Angular Questions

By Siva Charan
Published
Categorized as angular, primeng-dropdowns Tagged ,

How to use empty value in select box?

I have the massive of employees positions: positions = [ { id: ‘0’, title: ‘position0’, }, { id: ‘1’, title: ‘position1’, }, { id: ‘2’, title: ‘position2’, }, { id: ‘3’, title: ‘position3’, }, ]; I create reactive form. As you see, single field of this form is not initialized: form: FormGroup = new FormGroup({ […]

By sergey kalinin
Published
Categorized as angular, primeng, primeng-dropdowns Tagged , ,

how to disable primeng multiselect dropdown options of respective multiselect dropdown when a value is changed in a loop

I am using primeng v6.x multiselect inside a table where data rendered dynamically in a loop. My options array looks as follows: let data = [ { label: "ALL", value: "all", disabled: false }, { label: "PQR", value: "pqr", disabled: false }, { label: "XYZ", value: "xyz", disabled: false } ]; I am passing the […]

By Siva Charan
Published
Categorized as angular, primeng, primeng-dropdowns Tagged , ,

NgPrime p-dropdown Template Advanced with Templating, Filtering and Clear Icon-collapses when wraping with form element

https://stackblitz.com/edit/primeng-dropdown-demo?file=src%2Fapp%2Fapp.component.html When i wrap the following code in </form element, the drop collapses. <h5>Advanced with Templating, Filtering and Clear Icon</h5> <p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country"> <ng-template pTemplate="selectedItem"> <div class="country-item country-item-value" *ngIf="selectedCountry"> <div>{{selectedCountry.name}}</div> </div> </ng-template> <ng-template let-country pTemplate="item"> <div class="country-item"> <div>{{country.name}}</div> </div> </ng-template> </p-dropdown> Source: Angular Questions

By user2435182
Published
Categorized as angular, html, javascript, primeng-dropdowns Tagged , , ,

How to use Angular UI library PrimeNG to get a drop down in tabMenu header?

I have a Angular project, where I use primeng components. A tabMenu header with a few tabs and a drop down showing some options. This is the desired result : tabMenu header I have created a tabMenu header but was not able to add a drop down as shown in the above image. My current […]

PrimeNg dropdown in multiple p-tree nodes: Differentiating selected options

I have a PrimeNg p-tree <p-tree [value]="treeNodes" selectionMode="single" [(selection)]="selectedNode"></p-tree> TreeNodes are expressed with ng-templates, one of the templates being as follows. <ng-template let-node pTemplate="stagebased" > <input [(ngModel)]="node.label" type="text" > <p-dropdown [options]="stages" [(ngModel)]="stage" optionLabel="name"></p-dropdown> </ng-template> There is a menu on the left which has a menu item with this command – command: (event) => { this.addElement("<Node […]

1 2 3 4

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq