Child doesn't render template passed by parent

Issue Well, this is my parent component where I am trying to pass the template nodeTemplate to the child ils-tree <div class="nodes-panel"> <ils-tree layout="horizontal" [json]="nodes" [template]="nodeTemplate"> </ils-tree> </div> <ng-template #nodeTemplate> <ng-template let-node pTemplate="default"> <p class="node-type">{{node.data.nodeType}}</p> <p class="node-name">{{node.data.name}}</p> </ng-template> <ng-template let-node

Continue reading

<p-fileUpload> Change icon on PrimeNG on file upload

Issue Is it possible to change the icon on choose button on file upload ? In my case it is always “+”. <p-fileUpload class=”btn-primary” auto=”true” mode=”basic” name=”demo[]” chooseLabel=”Upload” [url]=”apiImageLocation” accept=”image/*” maxFileSize=”2000000″ (onUpload)=”onUploadImageSuccess($event)” (onError)=”onUploadImageError($event)”> </p-fileUpload> Solution You can override font awesome

Continue reading

Hide Primeng datatable paginator when no records

Issue I have added Datatable from primeng-v2.0.4. <p-dataTable [value]=”tableData” [rows]=”rows” [paginator]=”true” [resizableColumns]=”true” [tableStyleClass]=”table-wrap” [rowsPerPageOptions]=”[5,10,20]”> : : </p-dataTable> I saw option [paginatorAlwaysVisible]=”false” in one of the forums, but that attribute does not seem to be available for this version of primeng.

Continue reading

primeNG multiselect on change not triggered on chips removal

Issue below is a sample of my code. A primeng multiselect is the source of a primeng dropdown: HTML: <p-multiSelect [options]="elements" [(ngModel)]="selectedElements" optionLabel="name" display="chip" (onChange)="onElementChange($event)"></p-multiSelect <p-dropdown [options]="availableElements" [(ngModel)]="selectedElement" optionLabel="elementID" placeholder="Select an Element"></p-dropdown> ts: onElementChange(event) { this.availableElements = []; this.availableElements =

Continue reading

Unable to display PrimeNg toasts when switching pages

Issue I’m trying to use the PrimeNg Toasts to confirm the deletion of one user. Basically, here is my code: deleteUser() { this.confirmationService.confirm({ message: this.translateService.instant(‘common.messages.deletion-confirm’), header: this.translateService.instant(‘common.messages.deletion-title’), icon: ‘fa-light fa-triangle-exclamation’, acceptLabel: this.translateService.instant(‘common.messages.ok’), rejectLabel: this.translateService.instant(‘common.messages.cancel’), rejectButtonStyleClass: ‘p-button-secondary p-button-text’, accept: async ()

Continue reading

How to programmatically select item in primeng p-menu?

Issue Any idea how to programmatically select an item in a primeng p-menu? Code is straightforward: <p-menu #menu [popup]=”true” [model]=”configMenuItems” appendTo=”body” [style]=”{‘text-align’: ‘left’}”></p-menu> <button type=”button” class=”btn btn-link” pTooltip=”Select Site” tooltipPosition=”left” onclick=”this.blur();” (click)=”menu.toggle($event)”> {{selectedSite.DisplayName}} <span class=”caret”></span> </button> Solution Judging by the

Continue reading

primeng issues with rc5

Issue After upgrading to rc5, and reinstalling primeng with the new release, I receive the following error: zone.js?1472019041780:484 Unhandled Promise rejection: Template parse errors: Can’t bind to ‘icon’ since it isn’t a known property of ‘button’. (“ver’:hovered,’ui-state-focus’:focused,’ui-state-disabled’:disabled}” >][icon]=”icon” pButton *ngIf=”showIcon”

Continue reading

How can I upload the data to my p-multiSelect?

Issue I’m working with the primeNG component, but I can’t load the data. MultiSelect this.listadoProductos = this.resolucionDatosCargados[‘listProduct’]; this.parametros[‘producto’] = this.listadoProductos; console.log(this.parametros[‘producto’]); <!–MultiSelect–> <h4>Grupo de producto</h4> <div class=”ui-fluid”> <p-multiSelect [options]=”listadoProductos” [(ngModel)]=”parametros.producto” optionLabel=”descripcion” defaultLabel=”Producto” display=”chip”></p-multiSelect> </div> This is the JSON object that

Continue reading

How to change primary color for Prime NG

Issue How can I change default primary color for primeNG (saga-blue theme) ? changing –primary-color doesn’t help, because in node_modules/…./theme.css elements are styled using the main color hex and not ‘ –primary-color ‘. I also can’t override styling for all

Continue reading

Sending parameters from my home page to another page

Issue export class HomeComponent implements OnInit { selectedStartDatee: Date; id:number; … constructor( this.selectedStartDatee = new Date(this.datepipe.transform(this.datenow, ‘MM.dd.yyyy HH:mm:ss’)); this.selectedStartDatee.setDate(this.selectedStartDatee.getDate() – 7); this.id=2; ) btnshowAnotherComponenet(){} } export class AnotherComponent implements OnInit { @Input date:Date @Input id:number } When I click the

Continue reading

primeng table:p-table row grouping width not working when scrollable enable

Issue I am using primeng table with angular.Below is the code for using table: <p-table [value]=”cars” dataKey=”brand” [scrollable]=”‘true'” scrollHeight=”400px”> <ng-template pTemplate=”header”> <tr> <th style=”width:50px”>Vin</th> <th style=”width:50px”> Year</th> <th style=”width:100px”> Brand</th> <th>Color</th> </tr> </ng-template> <ng-template pTemplate=”body” let-rowData let-rowIndex=”rowIndex” let-expanded=”expanded” let-columns=”columns”> <tr

Continue reading

primeng table:p-table row grouping width not working when scrollable enable

Issue I am using primeng table with angular.Below is the code for using table: <p-table [value]=”cars” dataKey=”brand” [scrollable]=”‘true'” scrollHeight=”400px”> <ng-template pTemplate=”header”> <tr> <th style=”width:50px”>Vin</th> <th style=”width:50px”> Year</th> <th style=”width:100px”> Brand</th> <th>Color</th> </tr> </ng-template> <ng-template pTemplate=”body” let-rowData let-rowIndex=”rowIndex” let-expanded=”expanded” let-columns=”columns”> <tr

Continue reading

primeng table:p-table row grouping width not working when scrollable enable

Issue I am using primeng table with angular.Below is the code for using table: <p-table [value]=”cars” dataKey=”brand” [scrollable]=”‘true'” scrollHeight=”400px”> <ng-template pTemplate=”header”> <tr> <th style=”width:50px”>Vin</th> <th style=”width:50px”> Year</th> <th style=”width:100px”> Brand</th> <th>Color</th> </tr> </ng-template> <ng-template pTemplate=”body” let-rowData let-rowIndex=”rowIndex” let-expanded=”expanded” let-columns=”columns”> <tr

Continue reading

PrimeNg Icons Not Showing (Checkbox and Select)

Issue Checked box and select sans icons. I’ve added the primeicons library per: https://github.com/primefaces/primeng/wiki/Migration-Guide However, something is still a muck, I can’t get the icons with show up. package.json: … “primeicons”: “^1.0.0-beta.10”, “primeng”: “6.1.2”, also have, not sure if relevant.

Continue reading

PrimeNg Icons Not Showing (Checkbox and Select)

Issue Checked box and select sans icons. I’ve added the primeicons library per: https://github.com/primefaces/primeng/wiki/Migration-Guide However, something is still a muck, I can’t get the icons with show up. package.json: … “primeicons”: “^1.0.0-beta.10”, “primeng”: “6.1.2”, also have, not sure if relevant.

Continue reading

How to make only one radiobutton clickable with PrimeNG p-table angular

Issue I’m using PrimeNg table to display my items. <p-table *ngIf="certificates | async as certificates" [value]="certificates"> <ng-template pTemplate="header"> <tr> <th style="max-width: 40%">Name</th> <th style="max-width: 10%">Valid</th> <th style="max-width: 10%">Active</th> </tr> </ng-template> <ng-template pTemplate="body" let-certificate> <p-skeleton *ngIf="loading"></p-skeleton> <tr *ngIf="!loading"> <th>{{ certificate.name }}</th>

Continue reading

Angular 2 Primeng Message Service not showing message

Issue Below predefined Primeng message service used to show popup notification import { MessageService } from “primeng/components/common/messageservice @Component({ selector: “student-wizard”, providers: [MessageService], templateUrl: “student-wizard.component.html”, styleUrls: [“student-wizard.component.css”] }) constructor( private messageService: MessageService) {} From HTML we are calling below method :

Continue reading

Filtering Data Table in PrimeNG

Issue How can I get the number of rows after filtering using PrimeNG’s default filters in data table. [totalRecords]=”totalRecords” always shows the records count which is fetched initially. Even though after filtering, totalRecords value remains same and does not change

Continue reading

Angular PrimeNG Autocomplete: Displaying multiple fields?

Issue Suppose we have this scenario: <p-autoComplete dataKey="id" field="make" emptyMessage="{{‘NoDataFound’ | translate}}" [delay]="0" [suggestions]="vehicles" [minLength]="0" appendTo="body" (completeMethod)="searchVehicles($event)" (onSelect)="on($event)"> <ng-template let-vehicle pTemplate="item"> {{vehicle.make}} {{vehicle.model}} </ng-template> </p-autoComplete> with the controller: export class AutoCompleteDemo { selectedVehicle: Vehicle; vehicles: Vehicle[]; searchVehicles(event) { this.vehiclelookupservice.getResults(event.query).then(data =>

Continue reading