The primeng dropdown supports an event onChange that can be looked for any change in the drop down app.component.html <p-dropdown [options]=”cities2″ [(ngModel)]=”selectedCity2″ optionLabel=”name” (onChange)=”onChange($event)”></p-dropdown> app.component.ts onChange(event) { console.log(‘event :’ + event); console.log(event.value); } This should help
To make things clear: the styleClass property is only an addition to the original classes of the component. That means, you always have to use the original classes in order to style the component. With styleClass you then have the possibility to address one or more components of a set of components of the same … Read more
I figured it out. These two attributes should be added: sortField=”userName” [sortOrder]=”-1″ The sortField matches the column name and the sortOrder can be either 1 for ascending and -1 for descending. Here’s the working solution: <p-dataTable [value]=”webUserSummaryList” [rows]=”10″ reorderableColumns=”true” sortField=”userName” sortOrder=”-1″> <p-column field=”userName” header=”Username” [filter]=”true” [sortable]=”true”></p-column> <p-column field=”emailAddress” header=”Email” [filter]=”true” [sortable]=”true”></p-column> <p-column field=”firstName” header=”First Name” … Read more
It is necessary to add an attribute appendTo. e.g. <p-dropdown appendTo=”body” [options]=”tables” [(ngModel)]=”selectedTable” [style]=”{width: ‘100%’}”></p-dropdown>
In my case I used autoWidth = false and set style attrribute like below <p-dropdown [options]=”educationLevels” [(ngModel)]=”selectedEducationLevel” name=”educationlevel” autoWidth=”false” [style]=”{‘width’:’100%’}”></p-dropdown>
Since >>> is deprecated have to use ::ng-deep instead. With material2 v6 and primeng v5.2.* :host { ::ng-deep .prime-slider-override { background-color: #26A3D1; background-image:none; border:none; color:white; .ui-slider-range { background: red; } } } <p-slider [(ngModel)]=”rangeValues” styleClass=”prime-slider-override”></p-slider>
Using npm install @angular/cdk –save would resolve this. It needs it because the p-table uses the p-paginator which uses p-dropdown, which this needs the cdk. You can check it here: Table: https://github.com/primefaces/primeng/blob/7.1.0/src/app/components/table/table.ts Paginator: https://github.com/primefaces/primeng/blob/7.1.0/src/app/components/paginator/paginator.ts Dropdown: https://github.com/primefaces/primeng/blob/7.1.0/src/app/components/dropdown/dropdown.ts
update Angular 5 ngOutletContext was renamed to ngTemplateOutletContext See also CHANGELOG.md @ angular/angular original Templates (<template>, or <ng-template> since 4.x) are added as embedded views and get passed a context. With let-col the context property $implicit is made available as col within the template for bindings. With let-foo=”bar” the context property bar is made available … Read more