primeng

I want to use the styleClass property of the Togglebutton component. As described in another post , I thought it is straight forward by using: styleClass="test" In my css-file I then set some attributes, like .test { background: red; } But this does not work. Working with style is perfectly clear by using [style]="{'background':'red'}" No problem with that. But styleClass does not work. Here is the component . Any idea how to use styleClass ? 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

I am currently developing a user interface using Angular 4, Angular Materials and PrimeNG components. The latest component I am battling with is the MultiSelect Component from PrimeNG: https://www.primefaces.org/primeng/#/multiselect I am simply just trying to make the component's width fit 100% of the parent component. Is there a specific process I need to follow to edit CSS classes for this component? The documentation says to use "Style" for inline - does this mean: <p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100%;"></p-multiSelect>

Using angular (4.1.3) and primeng (4.0.3) datatable I need to set the filter value (e.g. from URL parameter). There is a pretty good docu on custom filters by primeng ( https://www.primefaces.org/primeng/#/datatable/filter ). I've tried to implement it similarly with a primeng InputText component as a custom filter: <p-dataTable [value]="licenses" scrollable="true" exportFilename="licenses" sscrollHeight="60vh" [paginator]="true" [rows]="20" [pageLinks]="10" [rowsPerPageOptions]="[5,10,20,50,100,999999]" #dt> <p-column [style]="{'width':'180px'}" [sortable]="true" field="customerId" header=

I have an accordion as shown below. When the link is clicked, I'd need to trigger the click event of all p-accordianTab elements. How is it possible? <a (click)="openCloseAll()" >{{openCloseAllText}} all</a> <p-accordion [multiple]="true"> <div class="row" *ngFor="let category of result.Categories"> <p-accordionTab #accordianTab header="{{category.Name}}"> </p-accordionTab> </div> </p-accordion> I tried adding this "#accordionTab" to the element and accessing it from TypeScript but doesn't work: @ViewChild('accordionTab') accordionTab: ElementRef; openCloseAllText: string = "Open";

I'm currently working on an Angular 4 project and using the PrimeNG DataTable. So far this framework seems pretty neat, but I would like to make my paging server-side. That way I will load only 10,20,.. records at a time rather than loading all 1000+ at once.. Has anyone done this before or does anyone know a solution for this? PS: If you don't have a solution but know a framework that does support this, please let me know! Looks like Lazy is what we are... looking for :) https://www.primefaces.org/primeng/#/table/lazy Jyoti With the help of Lazy Loading, we can implement server side paging,

I am very new in Angular 2\4 and I am trying to follow this quick video tutorial to add PrimeNG components to my Angular project: https://www.youtube.com/watch?v=6Nvze0dhzkE and the Get started section of the PrimeNG tutorial page: https://www.primefaces.org/primeng/#/setup So this is my app.component.html view: <!--The whole content below can be removed with the new code.--> <div style="text-align:center"> <h1> Welcome to {{title}}!! </h1> </div> <p-calendar [(ngModel)]="value"></p-calendar> {{value | date:'dd.mm.yyy'}} As you can see I have inserted this tag to show the calendar component:

when I have clicked on button then data table particular column set the filter value.when I have clicked on CARG button then apply that value on the symbol column. when clear the value its show all records. Solved.. using dt.filter(value,field, matchMode); .html <div class="ui-widget-header nopadding"> <label *ngFor="let filterRow of Symbols_Array;let l=index;"> <button (click)="dt.reset(); ColumnFilter(dt,filterRow.label,'symbol','')" pButton type="button" [style]="{'text-transform': 'capitalize','width':'100%'}" class="button btn-xs" [label]="filterRow.label"></button> </label> </div> <!--

I'm trying to bring a data table layout with pagination that has checkbox selection for data in it. I'm able to select a page's data and when I move to another page, and select different set of data, the first page selection is lost. demo.html: <p-dataTable [value]="cars" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" sortMode="multiple" [(selection)]="selectedCars2"> <p-column [style]="{'width':'38px'}" selectionMode="multiple" ></p-column> <p-column field="vin" header="Vin"></p-column> <p-column field="year" header="Year"></p-column> <p-column field="brand"

I've followed the instruction to install primeng by running npm install primeng --save then importing what I need in the app.module.ts file, for example: import {CheckboxModule} from 'primeng/primeng'; ... imports: [ CheckboxModule, ],... I then add the style sheets to the index.html file: <head> ... <link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/omega/theme.css" /> <link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/primeng.min.css" /> <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome