Questions tagged primeng-dropdowns

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

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
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
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
Categorized as angular, primeng, primeng-dropdowns Tagged , ,

NgPrime p-dropdown Template Advanced with Templating, Filtering and Clear Icon-collapses when wraping with form element 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>{{}}</div> </div> </ng-template> <ng-template let-country pTemplate="item"> <div class="country-item"> <div>{{}}</div> </div> </ng-template> </p-dropdown> Source: Angular Questions

By user2435182
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 […]

PrimeNg custom validation using CSS

I am using validationFlag in my TS code. Based on this I want to validate and focus PrimeNG elements (p-dropdown, p-autocomplete). I have tried below approach seems not working. However if I try similar on HTML elements then it works. Has anyone faced similar issues? None of below working – <p-dropdown placeholder="1" [ngStyle]=" {‘border-color’:’red’}" > […]

By Vikas
Categorized as angular, css, primeng, primeng-dropdowns Tagged , , ,

Open a new primeng table on cell click of an exiting primeng table

I have a primeng table with some definite rows and columns. There are some cells which have simple edits(like numerals), some cell which are dropdowns. However the requirement is to have some particular cells which on click should open a modal table. I was thinking of embedding the p-table in a modal p-dialog with visibility […]

1 3

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